Реализация собственного *ngIf

Question

Я хочу создать свою собственную директиву *ngIf. Директива получит число и не будет отображать шаблон, если пиксели внутренней ширины экрана меньше полученного числа.

Как я могу реализовать свой собственный *ngIf?

Answer 1

Это называется структурной директивой.

Вы можете проверить источник*ngIf

В документации Angular также есть раздел об этом https://angular.io/guide/structural-directives

Основная часть

 this.viewContainer.createEmbeddedView(this.templateRef);

который позволяет штамповать шаблон.

Если у вас есть

<my-component *myIf="isTrueOrFalse"></my-component>

* приведет к

<my-component></my-component>

передается в качестве шаблона в директиву, которая затем может быть помечена / удалена.

Answer 2

Это довольно просто.

Используйте старый добрый ngIf, как это *ngIf='someVariable' а затем просто переключить это someVariable от true в false когда вы хотите, чтобы его визуализировали или нет.

Я хотел бы создать прослушиватель событий внутри компонента, который прослушивает событие ширины окна, и, глядя на ширину, можно решить, скрывать ли какой-либо элемент или нет, установив someVariable