typescript ge t current screen resolution 1

typescript ge t current screen resolution

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();
    }


}

Here is what the above code is Doing:
1. We are importing the HostListener decorator from the @angular/core library.
2. We are using the @HostListener decorator to listen to the window:resize event.
3. We are using the getScreenSize() method to get the height and width of the screen.
4. We are calling the getScreenSize() method in the constructor.
5. We are using the ngOnInit() lifecycle hook to call the getScreenSize() method.
6. We are using the ngOnDestroy() lifecycle hook to unsubscribe from the window:resize event.

Similar Posts