Les directives structurelles

• La syntaxe de la directive ngIf ressemble à ceci:

<div *ngIf="condition">Contenu à rendre lorsque la condition est vraie.</div>

• Une version étendue de ceci ressemblerait à ceci:

<ng-template [ngIf]="condition">
  <div>Contenu à rendre lorsque la condition est vraie.</div>
</ng-template>

• La syntaxe de NgIf est agréable et simple, nous pouvons simplement le déclarer sur un élément ou un composant et le laisser opérer sa magie.
• Cette instruction conditionnelle serait évaluée de la même manière que notre JavaScript évaluerait une if (condition) {}instruction, convertissant la valeur que vous fournissez en une valeur véridique ou fausse et le rendu en conséquence.

• Afficher/masquer un objet
• Si l’expression associée à la directive est "false" alors l’élément et son contenu sont retirés du DOM (ou jamais ajoutés).
• L’exemple suivant montre comment afficher ou masquer un bouton suivant la valeur de la variable afficher

//src/app.component.html
<button *ngIf="afficher">Afficher *ngIf</button>
//src/app.component.ts
   export class AppComponent {
     afficher = true;
     title = 'lesdirectives';
   }

• La directive ngIf prend également en charge les opérateurs logiques, tout comme une instruction if régulière le ferait.
• *ngIf avec l’opérateur Not(!) (le NON logique)
• Pour inverser la valeur booléenne d’une variable, nous pouvons utiliser l’opérateur not (!). Le bloc marqué est alors affiché lorsque la variable est fausse.

@Component({
  selector: 'my-app',
  template: `
    <div *ngIf="!admin">
     Bonjour <strong>Mohamed Ali</strong>
    </div>
  `,
})
export class AppComponent  {
  admin = true;
}

• *ngIf avec l’opérateur && (ET logique)
• Pour enchaîner deux ou plusieurs instructions utiliser l’opérateur AND (&&). Tout comme en JavaScript, la déclaration n’est vraie que lorsque toutes les valeurs chaînées sont également vraies.
• Le bloc marqué n’est donc affiché que lorsque toutes les valeurs sont vraies.

@Component({
  selector: 'my-app',
  template: `
    <input type="checkbox" [(ngModel)]="selected"/>
    <input type="checkbox" [(ngModel)]="selected2" />

    <span *ngIf="selected && selected2">
      M'afficher lorsque les deux cases sont cochées :)
    </span>
  `,
})

• *ngIf avec l’opérateur || (OU logique)
• Tout comme l’opérateur AND, l’opérateur OR est utilisé pour enchaîner une ou plusieurs instructions.
• La différence avec l’opérateur OR est qu’une seule instruction doit être vraie pour que l’instruction globale soit également vraie.

@Component({
  selector: 'angular-app',
  template: `
  <div *ngIf="a == 6 || b == 9">
    La valeur de a est 6 ou la valeur de b est 9
  </div>
  `,
})
export class AppComponent {
  a = 6;
  b = 9;
}

<div *ngIf="isLoggedIn; else loggedOut">
 Bienvenue à nouveau.
</div>
<ng-template #loggedOut>
  S'il vous plaît, connectez-vous.
</ng-template>

<ul>
  <li *ngFor="let utilisateur of utilisateur">{{ utilisateur.name }}</li>
</ul>

• let utilisateur créer une variable locale qui sera disponible dans le modèle.
• of utilisateur signifie que nous allons itérer sur les utilisateurs itérables qui devraient être mis à disposition dans notre composant.
• Le caractère * avant ngFor crée un modèle parent. Il s’agit d’un raccourci vers la syntaxe suivante: template="ngFor let item of items"

<container_element [ngSwitch]="switch_expression">  
    <inner_element *ngSwitchCase="match_expresson_1">...</inner_element>  
    <inner_element *ngSwitchCase="match_expresson_2">...</inner_element>  
    <inner_element *ngSwitchCase="match_expresson_3">...</inner_element>  
    <inner_element *ngSwitchDefault>...</element>  
</container_element> 

Directives	La description
ngSwitch	C’est une directive structurelle, toutes les valeurs possibles définies à l’intérieur. Il obtient la valeur de commutation basée sur l’instruction correspondante parmi plusieurs possibilités.
ngSwitchCase	L’instruction ngSwitchCase est déclarée dans la directive ngSwitch avec la valeur spécifique.
ngSwitchDefault	Cette instruction s’exécute lorsque l’expression ne correspond à aucune des valeurs définies.

• Dans l’exemple ci-dessous, nous essaierons de comprendre l’expression NgSwitch de manière simple. Afin de définir la directive ngSwitch dans le modèle HTML angulaire. Ajoutez la directive [ngSwitch] avec la valeur souhaitée sur le conteneur principal:

<ul [ngSwitch]="superhero">

</ul>