<div class="Flugliste">
	<!--<nav>
	<a routerLink="/liste" routerLinkActive="active">Liste</a>
	<a routerLink="/edit" routerLinkActive="active">Edit</a>
</nav>
<router-outlet></router-outlet>-->

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

	<hr>

 	<ul>
		<li *ngFor="let f of flugSet | async; 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>

 <hr>
	<ul>
  		<li *ngFor="let f of flugSet | async ; let istGerade = even; let i = index">
		<!--<li *ngFor="let f of flugSet | async; let istGerade = even; let i = index">-->
   <!--<button (click)="flug.toggleState()" [@flugState]="flug.state">Aktualisieren</button>-->
			{{i+1}}.
			<span [ngClass]="{'text-primary': istGerade, 'text-info': !istGerade}">
			<span class="badge">{{i+1}}: Flug #{{f.FlugNr | fixedLenNumber:3}}</span> <Flugdetail 
		[flug]="f" 
		(datenGeaendertEvent)="onDatenGeaendertEvent($event)">
		</Flugdetail></span></li>
	</ul>

	<hr>

</div>