<h2> Angular 2.x/TypeScript-Cheatsheet</h2>

<div class="Flugliste">


    <h3>statischer Text</h3>

    <div title="Flug #{{ flug?.FlugNr }}">Flug #{{ flug?.FlugNr }} von {{ flug?.Abflugort}} nach {{ flug?.Zielort}} hat {{flug?.FreiePlaetze | number:'4.0-0' }} freie Plätze
    </div>
    Datum: {{flug.Datum | date:"EEE dd.MM.yy" | uppercase }}<br> 72 + 8 ist {{72+8}}.<br> Flugnummer, wenn vorhanden {{flug?.FlugNr}}<br>

    <h3>Attributbindung</h3>
    <img src="/grafiken/balken.png" style="height:40px" [style.width.px]="flug.FreiePlaetze">

    <form (ngSubmit)="onSubmit(theForm)" #theForm="ngForm">
        Eingabe: <input [(ngModel)]="flug.FreiePlaetze" name="FreiePlaetze">
    </form>
    <button [disabled]="flug?.FreiePlaetze<=0 || flug?.AbflugOrt=='Essen'" (click)="buchen(flug)">Buchen</button>

    <div [ngClass]="{'text-danger': flug?.FreiePlaetze<3, 
 'text-warning': flug?.FreiePlaetze>=3, 
 'text-success': flug?.FreiePlaetze>0}">
        {{flug?.FreiePlaetze}} freie Plätze</div>

    <h3> Lokale Variablen</h3>


    <input #freiePlaetze placeholder="anzahl" value="123">
    <br> Sie haben eingegeben: {{freiePlaetze.value}}


    <h3> Schleifen </h3>
    <ul>
        <li *ngFor="let f of flugSet;let istGerade=even; let i=index" [ngClass]="{'text-primary': istGerade, 'text-info': !istGerade}">
            {{i | number:'3.0-0' }}: {{f.FlugNr}}</li>
    </ul>

    <h3> Bedingungen </h3>
    <div *ngIf="flug?.FreiePlaetze<0">Dieser Flug ist überbucht!</div>
    <div *ngIf="flugSet">{{flugSet.length}} Flüge gefunden</div>
    <div *ngIf="!flugSet">keine Flüge gefunden</div>

    <ng-template #keineFluege>
        <p>keine Flüge gefunden</p>
    </ng-template>
    <p *ngIf="flugSet; else keineFluege">
        {{flugSet.length}} Flüge gefunden
    </p>


    <div [ngSwitch]="flug?.FreiePlaetze">
        <span *ngSwitchCase="0">ausgebucht</span>
        <span *ngSwitchCase="1">noch ein Platz verfügbar</span>
        <span *ngSwitchDefault>mehrere Plätze verfügbar</span>
    </div>

</div>