Реактивност на условия в Angular

Реактивността също ще работи с условия ngIf. Това означава, че можем да показваме или скриваме блок в зависимост от това какво се съдържа в свойството на класа.

Нека опитаме на практика. Да кажем, че имаме следния блок

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

Нека да го показваме или скриваме по условие:

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

Нека сега направим два бутона. При клик върху първия ще показваме нашия блок, а при клик върху втория - ще го скриваме:

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

Нека добавим в класа на компонента свойство, което ще регулира дали блокът е показан или не:

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

А сега нека напишем реализацията на нашите методи за показване и скриване на блока:

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