<!-- C:\JavaScriptEtAngular\Angular\miProyectoAngular\src\app\components\c09\c09.components.html -->
<div class="container text-center">
    <p>Interpolación : {{miVariableAMostrar}}</p>
    <div> Una cadena de caracteres interpolada: 
        {{unaCadenaDeCaracteres}}</div> 
    <div>Un número interpolado : {{unNumero}}</div> 
    <div>Un objeto interpolado: 
         <ul> 
           <li>Apellido : {{unobjeto.apellido}}</li> 
           <li>Nombre : {{unobjeto.nombre}}</li> 
           <li>Ciudad : {{unobjeto.ciudad}}</li> 
         </ul> 
    </div>
</div>

<div class="container text-center">
    <button class="btn btn-primary" (click)="unClic()">{{textoDelBoton}}</button>
</div>

<div class="container text-center">
    <button class="btn btn-primary" (click)="unClic()">{{textoDelBoton}}</button>
    <p *ngIf="true">Este elemento se muestra</p> 
    <p *ngIf="false">Este elemento no se muestra </p>    
</div>

<div class="container text-center">
    <button class="btn btn-primary" (click)="unClic()">{{textoDelBoton}}</button>
    <p *ngIf="numeroDeClic%2 == 0">El botón ha sido clicado una cantidad par de veces</p> 
</div>

<div class="container text-center">
    <div>
        <button class="btn btn-primary" (click)="unClic()">{{textoDelBoton}}</button>
    </div>
    <p class="alert alert-primary">El botón ha sido clicado una cantidad
        <span *ngIf="numeroDeClic%2===0; then siMiIfEsVerdad else elseDeMiIf"></span> 
        de veces
    </p> 
        

    <ng-template #siMiIfEsVerdad > 
        <span class="alert alert-danger">par</span> 
    </ng-template> 
    <ng-template #elseDeMiIf > 
        <span class="alert alert-warning">impar</span> 
    </ng-template>    
</div>

<div class="container text-center">
    <div *ngFor="let unDeportista of deportistas; index as i; first as f;  
    last as l; odd as o; even as e">' + 
        <b>{{ unDeportista }} : </b> su indice : {{i}}, es el primero de la lista : {{f}}, es el último: {{l}}, 
        es un número impar : {{o}}, es un número par : {{e}} 
    </div>
</div>

<div class="container text-center">
    <div *ngFor="let unDeportista of deportistas; index as i; first as f; last as l; odd as o; even as e">
        <div [ngSwitch]=unSportif>
            <span *ngSwitchCase="'Laurence Cousin'"><strong>{{unDeportista}}</strong></span>
            <span *ngSwitchDefault>{{unDeportista}}</span>
        </div>
    </div>


</div>

<div class="container text-center">
    <h4 [class]="miClase">Uso de ngClass</h4>
    <button class="btn-primary" (click)="cambioDeClase()">
        Cambio de clase</button>
</div>