В проекте нужна структурная директива, которая по условию изменяет состояние элемента, на который накинута.
Покажу на примере простенькой директивы shimmer:
@Directive({
selector: '[shimmer]'
})
export class ShimmerDirective {
private _shimmer = false;
@HostBinding('class.shimmer')
public get shimmerBinding(): boolean {
return this._shimmer;
}
@Input()
public set shimmer(value: boolean ) {
this._shimmer = value;
}
constructor(
private templateRef: TemplateRef<any>,
private viewContainer: ViewContainerRef
) {
this.viewContainer.createEmbeddedView(this.templateRef);
}
}
Использую эту директиву вот так:
<button (click)="loading=!loading">
переключить
</button>
{{ loading }}
<p *shimmer="loading">проверка шиммера</p>
По идее, после нажатия на кнопку "переключить", на элемент p
должен навеситься класс shimmer
, но этого не происходит:
Выбрана именно структурная директива не просто так, нужна дополнительная обрабатываемая логика, так что способ изменить структурную директиву на атрибутивную не подходит