Реактивнокии шартҳо дар Angular

Реактивнокии низ бо шартҳои ngIf кор мекунад. Ин маънои онро дорад, ки мо метавонем блокро нишон диҳем ё пинҳон кунем вобаста ба он чи ки дар хосияти синф мавҷуд аст.

Биёед дар амал санҷем. Бигзор мо блокҳои зеринро дошта бошем

app/app.component.html<div>
  матн
</div>

Биёед онро вобаста ба шарт нишон диҳем ё пинҳон кунем:

app/app.component.html<div *ngIf="isShow">
  матн
</div>

Акнун ду тугма созем. Бо клик кардан ба якум блокро нишон медиҳем, ва бо клик кардан ба дуввум - пинҳон мекунем:

app/app.component.html<button (click)="show()">
  нишон додан
</button>
<button (click)="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;
  }
}