<div class="Flugliste">

    <h2>Spielwiese für verschiedene Beispiele zur Datenbindung</h2>

    <h3>Validierung</h3>



    <label for="name">Abflugort: </label>
    <input type="text" name="Abflugort" required [(ngModel)]="flug.Abflugort" #Abflugort>
    <div>
        class: {{ Abflugort.className }}<br> pristine: {{Abflugort.pristine}} valid: {{Abflugort.valid}}
    </div>

    <label for="name">Zielort: </label>
    <input type="text" name="Zielort" required [(ngModel)]="flug.Zielort" #ZielortValidierung="ngModel" #Zielort>
    <div>
        class: {{ Zielort.className }}<br> pristine: {{ZielortValidierung.pristine}} valid: {{ZielortValidierung.valid}}
    </div>




    <h3>Datenbinding mit Template reference variables</h3>

    <span #phone1>0201 7490700</span>
    <input #phone2 placeholder="phone number" value="0201 7490703">
    <br> Inhalt span: {{phone1.innerText}}<br> Inhalt input: {{phone2.value}}

    <h3>Datenbinding mit an Attribut-Direktive</h3>
    <p [myHighlight]="color">Highlight me!</p>
    <div>
        <input type="radio" name="colors" (click)="color='lightgreen'">Green
        <input type="radio" name="colors" (click)="color='yellow'">Yellow
        <input type="radio" name="colors" (click)="color='cyan'">Cyan
    </div>



    <h2>Sync vs Async Pipe</h2>

    Current Total (Sync Pipe): {{timerSync }}<br> Current Total (Async Pipe): {{timerAsync | async }}


    <h2>Array vs Obserable</h2>

    <div>
        Zahlen Array:
        <span *ngFor="let z of zahlen">{{z}}, </span></div>
    <div>
        Zahlen Obserable:
        <span *ngFor="let z of zahlenO | async">{{z}}, </span></div>
    <div>
        Flug Array:
        <span *ngFor="let f of fluege">{{f.FlugNr}}, </span> </div>
    <div>
        Flug Observable:
        <span *ngFor="let f of fluegeO | async">{{f.FlugNr}}, </span></div>
    <div>
        Flug Array2:
        <span *ngFor="let f of fluege2">{{f.FlugNr}}, </span> </div>
    <div>
        Flug Observable2:
        <span *ngFor="let f of fluege2O | async">{{f.FlugNr}}, </span></div>
    <div>
        Flug Observable2b:
        <span *ngFor="let f of fluege2O | async; let istGerade = even; let i = index">{{f.FlugNr}}, </span></div>
    <hr>
    <button class="btn btn-warning" (click)="update0()">Daten aus Dummyobjekten im UI generiert</button><br>
    <button (click)="update1()">Aktualisieren Quellobjekt</button><br>
    <button (click)="update2()">Aktualisieren gebundenes Objekt (aktualisiert Observable, wenn es auf dem Array basiert!)</button><br>

    <button class="btn btn-warning" (click)="update3()">Daten aus Service</button><br>
    <button (click)="update4()">Update Daten aus Service Quellobjekt (aktualisiert nicht Observable)</button><br>

    <h2>Einzelobjekte</h2>

    <div>Flug Einzelobjekt: {{ flug?.FlugNr }} von {{ flug?.Abflugort}}: {{flug?.FreiePlaetze}}</div>
    <div>NEIN: Flug Einzelobjekt Observable: {{ flugO?.FlugNr }} von {{ flugO?.Abflugort}}: {{flugO?.FreiePlaetze}}</div>
    <div>NEIN: Flug Array: {{ fluege?.FlugNr }} von {{ fluege?.Abflugort}}: {{fluege?.FreiePlaetze}}</div>



    <h2>Objektmenge</h2>

    <div *ngFor="let f of fluege">
        Fluege Array: {{ f.FlugNr }} {{ f.Abflugort}} {{f.FreiePlaetze}}</div>

    <!--<div *ngFor="let f of fluegeO">
NEIN: Fluege Observable: {{ f.FlugNr }} {{ f.Abflugort}} {{f.Zielort}}</div>-->

    <div *ngFor="let f of fluegeO | async">
        Flug Observable: {{ f.FlugNr }} {{ f.Abflugort}} {{f.FreiePlaetze}}</div>


    <!--Geht nicht
<div *ngFor="let f of fluege | async">
Flug Observable: {{ f.FlugNr }} {{ f.Abflugort}} {{f.Zielort}}</div>-->

    <!--Geht nicht-->
    <!--<div *ngFor="let f of flug2 | async">
Flug Observable: {{ f.FlugNr }} {{ f.Abflugort}} {{f.Zielort}}</div>-->


    <h2>Objektmenge</h2>
    {{status}}
    <button (click)="DatenLaden()">Aktualisieren</button>
    <hr>
    <ul>
        <li *ngFor="let f of fluege2O | async; let istGerade = even; let i = index">
            {{i+1}}.
            <span [ngClass]="{'text-primary': istGerade, 'text-info': !istGerade}">
		<Flugdetail 
		[flug]="f" 
		(datenGeaendertEvent)="onDatenGeaendertEvent($event)">
		</Flugdetail></span>
    </ul>

    <hr>
    <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 (click)="Aendern(f)">Ändern</button>
            <button (click)="Loeschen(f)">Löschen</button>
    </ul>



</div>