Реактивность условий в Angular
Реактивность также будет работать
с условиями ngIf. Это значит,
что мы можем показывать или скрывать
блок в зависимости от того, что
содержится в свойстве класса.
Давайте попробуем на практике. Пусть у нас есть следующий блок
<div>
text
</div>
Давайте будем показывать или скрывать его по условию:
<div *ngIf="isShow">
text
</div>
Сделаем теперь две кнопки. По клику на первую будем показывать наш блок, а по клику на вторую - скрывать:
<button (click)="show()">
show
</button>
<button (click)="hide()">
hide
</button>
Добавим в класс компонента свойство которое будет регулировать то, показан ли блок или нет:
export class AppComponent {
public isShow: boolean = true;
}
А теперь напишем реализацию наших методов для показа и скрытия блока:
export class AppComponent {
public isShow: boolean = true;
public show(): void {
this.isShow = true;
}
public hide(): void {
this.isShow = false;
}
}
Сделайте кнопку, нажатие по которой будет тоглить блок: показывать, если он скрыт, и скрывать, если он показан.