Réactivité des conditions dans Angular

La réactivité fonctionnera également avec les conditions ngIf. Cela signifie que nous pouvons afficher ou masquer un bloc en fonction de ce qui est contenu dans la propriété de classe.

Essayons en pratique. Supposons que nous ayons le bloc suivant

app/app.component.html<div>
  text
</div>

Affichons ou masquons-le selon une condition :

app/app.component.html<div *ngIf="isShow">
  text
</div>

Créons maintenant deux boutons. Un clic sur le premier affichera notre bloc, et un clic sur le second le masquera :

app/app.component.html<button (click)="show()">
  show
</button>
<button (click)="hide()">
  hide
</button>

Ajoutons à la classe du composant une propriété qui régulera si le bloc est affiché ou non :

app/app.component.tsexport class AppComponent {
  public isShow: boolean = true;
}

Et maintenant, écrivons l'implémentation de nos méthodes pour afficher et masquer le bloc :

app/app.component.tsexport class AppComponent {
  public isShow: boolean = true;
  
  public show(): void {
    this.isShow = true;
  }
  public hide(): void {
    this.isShow = false;
  }
}