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

<div>
	text
</div>

Affichons ou masquons-le selon une condition :

<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 :

<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 :

export class AppComponent {
	public isShow: boolean = true;
}

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

export class AppComponent {
	public isShow: boolean = true;
	
	public show(): void {
		this.isShow = true;
	}
	public hide(): void {
		this.isShow = false;
	}
}

Créez un bouton dont le clic basculera l'état du bloc : l'afficher s'il est masqué, et le masquer s'il est affiché.