Подскажите, пожалуйста, каким образом можно реализовать подобное? Хочу в темплейте к нужным блокам применить директиву, которая будет показывать/скрывать div в зависимости от value, например *ifViewportSize="'mobile'" (в идеале).
<div *ifViewportSize="'large'">PC</div>
<div *ifViewportSize="'small'">Mobile</div>
Директива: (результат в консоли) https://stackblitz.com/edit/angular-ivy-wdl8ee
@Directive({
selector: '[ifViewportSize]'
})
export class IfViewportSizeDirective {
size: string;
config = {
large: 992,
medium: 768,
small: 576
};
constructor(
private elemRef: ElementRef,
private vcRef: ViewContainerRef,
private templRef: TemplateRef<any>) {
window.onresize = (event) => {
this.showElem();
};
}
@Input() set ifViewportSize(size: string) {
this.size = size;
}
ngOnInit() {
this.showElem();
}
showElem() {
console.log('size: ',this.size);
if (this.config[this.size] < window.innerWidth) {
this.vcRef.clear();
this.vcRef.createEmbeddedView(this.templRef);
}
else this.vcRef.clear();
}
}
В итоге директива у меня применяется почему-то только к последнему диву. Подскажите пожалуйста, почему так?
Еще пробовала (в этом же проекте stackblitz) создать отдельно директивы ifMobile и ifTablet. В них запускала функцию window.onresize, но срабатывает опять же только директива на последнем div.
Не могу понять, почему такое поведение. Это можно исправить? Если этот путь ошибочный (вывод определенных блоков на экран взависимости от размера экрана), то как это можно сделать по другому?