📚 Cheatsheet

<div [ngSwitch]="role">
  <p *ngSwitchCase="'admin'">Accès administrateur</p>
  <p *ngSwitchCase="'user'">Accès utilisateur</p>
  <p *ngSwitchDefault>Accès invité</p>
</div>

<div [class.active]="isActive" [class.error]="hasError">Contenu</div>

<div [style.color]="isActive ? 'green' : 'black'" [style.font-size.px]="20">Texte</div>

<ul>
  <li *ngFor="let element of elements; let i = index">{{ i }} - {{ element.nom }}</li>
</ul>

<div *ngIf="estConnecte; else blocDeconnexion">
  Bon retour, utilisateur !
</div>
<ng-template #blocDeconnexion>
  <div>Veuillez vous connecter.</div>
</ng-template>

<ng-container *ngFor="let item of items">
  <section *ngIf="item.isActive">
    <h2>{{ item.titre }}</h2>
    <p>{{ item.description }}</p>
  </section>
</ng-container>

<p>{{ montant | currency:'EUR':'symbol' }}</p>

<p>{{ aujourdhui | date: 'fullDate' }}</p>
<p>{{ aujourdhui | date: 'dd/MM/yyyy' }}</p>

<pre>{{ monObjet | json }}</pre>

<!-- Dans le composant 'carte' -->
<div class="carte">
  <div class="carte-header">
    <ng-content select="[entete]"></ng-content>
  </div>
  <div class="carte-corps">
    <ng-content></ng-content>
  </div>
</div>

<input #nomInput (keyup)="0">
<p>Valeur: {{ nomInput.value }}</p>