How to use a structural directive?

Question

I need to make a structural directive that will display the element depending on the width of the screen.

https://stackblitz.com/edit/vim8-2-resize-template-pmp1b5?file=app/shared/if-viewport-size.directive.ts

My example work, but it skip at medium size. How to fix it?

Answer 1

The issue is that you are overwriting the window.onresize value.

I suggest using a Subject having the onresize value then subscribe to the subject in the different directive instances.

public windowResize$ = new BehaviorSubject<number>(window.innerWidth);
window.onresize = event => {
     this.windowResize$.next(window.innerWidth);
};

Running fork.