Detecting real time window size changes in Angular 4

Question

I have been trying to build a responsive nav-bar and do not wish to use a media query  so I intend to use  ngIF with the window size as a criterion  But I have been facing a problem as I am unable to find any method or documentation on Angular 4 window size detection  I have also tried the JavaScript method  but it is not supported   I have also tried the following   constructor platform  Platform        platform ready   then  readySource    gt            console log  Width      platform width             console log  Height      platform height                    which was used in ionic   And screen availHeight  but still no success

User · Answer

you can use this  https   github com ManuCutillas ng2-responsive  Hope it helps  -

User · Answer

The answer is very simple  write the below code  import   Component  OnInit  OnDestroy  Input   from   angular core      Import this  and write at the top of your  ts file import   HostListener   from   angular core     Component    selector   app-login    templateUrl     login component html    styleUrls      login component css       export class LoginComponent implements OnInit  OnDestroy      Declare height and width variables scrHeight any  scrWidth any    HostListener  window resize      event    getScreenSize event           this scrHeight   window innerHeight        this scrWidth   window innerWidth        console log this scrHeight  this scrWidth         Constructor constructor         this getScreenSize

User · Answer

If you want to react on certain breakpoints  e g  do something if width is less than 768px   you can also use BreakpointObserver   import  BreakpointObserver  Breakpoints  from   angular cdk layout             const isSmallScreen   breakpointObserver isMatched   max-width  599px       or even listen to changes to that breakpoint   breakpointObserver observe       max-width  768px          subscribe result   gt          if  result matches            doSomething            else              if necessary          doSomethingElse

User · Answer

You may use the typescript getter method for this scenario  Like this  public get width       return window innerWidth      And use that in template like this    lt section  ngClass      desktop-view   width  gt   768   mobile-view   width  lt  768     gt  lt  section gt    You won t need any event handler to check for resizing  of window  this method will check for size every time automatically

User · Answer

If you d like you components to remain easily testable you should wrap the global window object in an Angular Service   import   Injectable   from   angular core     Injectable   export class WindowService      get windowRef         return window           You can then inject it like any other service   constructor      private windowService  WindowService         And consume       ngOnInit           const width  this windowService windowRef innerWidth

User · Answer

The documentation for Platform width   and height    it s stated that these methods use window innerWidth and window innerHeight respectively  But using the methods are preferred since the dimensions are cached values  which reduces the chance of multiple and expensive DOM reads   import   Platform   from  ionic-angular        private width number  private height number   constructor private platform  Platform       platform ready   then      gt            this width   platform width            this height   platform height

User · Answer

HostListener  window resize       public onResize       this detectScreenSize       public ngAfterViewInit         this detectScreenSize       private detectScreenSize         const height   window innerHeight      const width   window innerWidth

User · Answer

To get it on init  public innerWidth  any  ngOnInit         this innerWidth   window innerWidth      If you wanna keep it updated on resize     HostListener  window resize      event    onResize event      this innerWidth   window innerWidth

User · Answer

This is an example of service which I use  You can get the screen width by subscribing to screenWidth   or via screenWidth  value  The same is for mediaBreakpoint    or mediaBreakpoint  value  import     Injectable    OnDestroy    from   angular core   import     Subject    BehaviorSubject    fromEvent    from  rxjs   import     takeUntil    debounceTime    from  rxjs operators     Injectable   export class ResponsiveService implements OnDestroy     private  unsubscriber   Subject lt any gt    new Subject      public screenWidth   BehaviorSubject lt number gt    new BehaviorSubject null     public mediaBreakpoint   BehaviorSubject lt string gt    new BehaviorSubject null      constructor         this init           init         this  setScreenWidth window innerWidth       this  setMediaBreakpoint window innerWidth       fromEvent window   resize          pipe          debounceTime 1000           takeUntil this  unsubscriber           subscribe  evt  any    gt            this  setScreenWidth evt target innerWidth           this  setMediaBreakpoint evt target innerWidth                    ngOnDestroy         this  unsubscriber  next        this  unsubscriber  complete           private  setScreenWidth width  number   void       this screenWidth  next width          private  setMediaBreakpoint width  number   void       if  width  lt  576          this mediaBreakpoint  next  xs          else if  width  gt   576  amp  amp  width  lt  768          this mediaBreakpoint  next  sm          else if  width  gt   768  amp  amp  width  lt  992          this mediaBreakpoint  next  md          else if  width  gt   992  amp  amp  width  lt  1200          this mediaBreakpoint  next  lg          else if  width  gt   1200  amp  amp  width  lt  1600          this mediaBreakpoint  next  xl          else         this mediaBreakpoint  next  xxl                   Hope this helps someone

[html] Detecting real time window size changes in Angular 4

Examples related to html

Examples related to angular

Examples related to dom-events