<div class="Flugliste">

 <h2>Flugliste</h2>
 {{status}}
 <button (click)="DatenLaden()" [disabled]="flugSet?.length>10">Neu laden</button>
 <button (click)="DatenLaden2()">Anzeige aktualisieren</button>
 <!--*ngIf="flugSet?.length<10"-->

<h3>Variante 1 - mit untergeordneter Komponente</h3>

 <ul>
  <li *ngFor="let f of flugSet ; let istGerade = even; let i = index">
   <span [ngClass]="{'text-primary': istGerade, 'text-info': !istGerade}">
			<span class="badge">{{i+1}}: Flug #{{f.FlugNr | number:'3.0'}}</span>
   <Flugdetail [flug]="f" (flugGeloeschtEvent)="onFlugGeloescht($event)"></Flugdetail>
   {{ f.FreiePlaetze | flugStatus:true }}
   <button typ="info" *ngIf="f.FreiePlaetze>0" (click)="Aendern(f)">Ändern</button>
   <button typ="warning" [disabled]="f.FreiePlaetze<=0 || f.AbflugOrt=='Essen'" (click)="Loeschen(f)">Löschen</button>
   </span>
  </li>
 </ul>

<h3>Variante 2 - ohne untergeordnete Komponente</h3>

 <ul>
  <li *ngFor="let f of flugSet ; let isEven = even; let i = index">
   <span class="badge">{{i+1}}: {{f.FlugNr }}</span> {{f.Datum | date:"EEE dd.MM.yy" | uppercase }} {{f.Abflugort}} -> {{f.Zielort}}
   : {{f.FreiePlaetze | fixedLenNumber:3}} freie Plätze!
   <button success (click)="Aendern(f)">Ändern</button>
   <button typ="warning" (click)="Loeschen(f)">Löschen</button>

   <!--*ngIf="flugSet?.length<=100"-->
 </ul>
</div>