Conditional reactivity in Angular

Reactivity will also work with ngIf conditions. This means we can show or hide a block depending on what is contained in the class property.

Let's try it in practice. Let's say we have the following block

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

Let's show or hide it conditionally:

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

Now let's make two buttons. By clicking on the first one we will show our block, and by clicking on the second one we will hide it:

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

Let's add a property to the component class that will control whether the block is shown or not:

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

Now let's write the implementation of our methods for showing and hiding the block:

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