Angular - Change CSS property with NgStyle dynamically

Question

I have div element which I want to show or no depending on the screen size (I know that can be done by mediaqueries, but tried to approach this with Angular). So I got working NgStyle condition [ngStyle]="{display: innerWidth < '600' ? 'none' : 'flex'}" when innerWidth is variable in the .ts file of this component

public innerWidth: any;
  ngOnInit() {
    this.innerWidth = window.innerWidth;
  }

This is working fine, but changing only when I reload the page, so I want to trigger this change dynamically when I resize the browser window, is that possible in similar way?

You basically need to subscribe to window's resize event and set value for this.innerWidth when that event occurs. Checkout here stackoverflow.com/a/45451974/3965832 — arximughal
– arximughal, Commented Dec 26, 2019 at 19:05

aw04 · Accepted Answer · 2019-12-26 19:08:25Z

5

You'll need to update the value when the window is resized. You can listen for window:resize:

@HostListener('window:resize', ['$event'])
onResize(event) {
  this.innerWidth = event.target.innerWidth;
}

answered Dec 26, 2019 at 19:08

aw04

11.2k11 gold badges60 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular - Change CSS property with NgStyle dynamically

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related