angular window resize event

Samuel Abusa Kennedy answered on August 8, 2022 Popularity 3/10 Helpfulness 1/10

answer angular window resize event

angular window resize event

Comment

import { Component } from '@angular/core';
import { fromEvent, Observable, Subscription } from 'rxjs';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  resizeObservable$: Observable<Event>;
  resizeSubscription$: Subscription;
  mobileView = false;

  ngOnInit() {
    this.resizeObservable$ = fromEvent(window, 'resize');
    this.resizeSubscription$ = this.resizeObservable$.subscribe(e => {
      if (window.innerWidth <= 400) {
        this.renderMobileView();
      } else {
        this.renderDesktopView();
      }
    });
  }

  ngOnDestroy() {
    this.resizeSubscription$.unsubscribe();
  }

  renderMobileView() {
    console.log('render mobile view');
    this.mobileView = true;
  }

  renderDesktopView() {
    console.log('render desktop view');
    this.mobileView = false;
  }
}

Popularity 3/10 Helpfulness 1/10 Language typescript

Source: stackblitz.com

Tags: angular typescript window-resize

Link to this answer
Share Copy Link

Contributed on Aug 08 2022

Samuel Abusa Kennedy

0 Answers Avg Quality 2/10

angular window resize event

Contents

More Related Answers

angular window resize event

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.