How do I retrieve the Width and Height from this event object

0 votes

I would like to perform some tasks based on the window re-size event (on load and dynamically).

Currently I have my DOM as follows:

<div id="Harbour">
    <div id="Port" (window:resize)="onResize($event)" >
        <router-outlet></router-outlet>
    </div>
</div>

The event correctly fires

export class AppComponent {
   onResize(event) {
        console.log(event);
    }
}

How do I retrieve the Width and Height from this event object?

Sep 8, 2020 in Angular by kartik
• 37,510 points
450 views

1 answer to this question.

0 votes

Hello @kartik,

Use:

<div (window:resize)="onResize($event)"
onResize(event) {
  event.target.innerWidth;
}

or using the HostListener decorator:

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

Supported global targets are window, document, and body.

Hope it helps!!
Thank you!!

answered Sep 8, 2020 by Niroj
• 82,720 points

Related Questions In Angular

0 votes
1 answer

How do I conditionally add attributes to React components?

Hello @kartik, For certain attributes, React is intelligent ...READ MORE

answered Jul 22, 2020 in Angular by Niroj
• 82,720 points
3,829 views
0 votes
1 answer

How can I strip HTML tags from a string in ASP.NET?

Hello @Kartik, If it is just stripping all HTML tags ...READ MORE

answered Jul 23, 2020 in Angular by Niroj
• 82,720 points
254 views
0 votes
1 answer

How do I detect a click outside an element?

Hello @kartik, Attach a click event to the ...READ MORE

answered Sep 10, 2020 in Angular by Niroj
• 82,720 points
1,212 views
0 votes
1 answer

How compile, controller, pre-linking and post linking works in Angularjs?

Explanation of compile and link process don't ...READ MORE

answered Jan 31, 2020 in Angular by Niroj
• 82,720 points
314 views
0 votes
1 answer

What are the vulnerability related to PHP Form?

Hii, The $_SERVER["PHP_SELF"] variable can be used by ...READ MORE

answered Feb 13, 2020 in PHP by Niroj
• 82,720 points
354 views
+1 vote
1 answer

How can we send message multiple time to a specific person or group in whatsapp using loop?

Hii @kartik,  This is simple task to send single ...READ MORE

answered Feb 28, 2020 in Java-Script by Niroj
• 82,720 points
1,876 views
0 votes
1 answer

What is meant by passing the variable by value and reference in PHP?

Hello, When the variable is passed as value ...READ MORE

answered Mar 27, 2020 in PHP by Niroj
• 82,720 points
454 views
0 votes
1 answer

Connection with MySQL server using PHP. How can we do that?

Hey @kartik, You have to provide MySQL hostname, ...READ MORE

answered Mar 27, 2020 in PHP by Niroj
• 82,720 points
177 views
0 votes
1 answer

How do I include a JavaScript script file in Angular and call a function from that script?

Hello @kartik, Refer the scripts inside the angular-cli.json (angular.json when using ...READ MORE

answered Sep 8, 2020 in Angular by Niroj
• 82,720 points
3,686 views
0 votes
1 answer

How do you import a javascript package from a cdn/script tag in React?

Hello, Go to the index.html file and import ...READ MORE

answered Jun 4, 2020 in Angular by Niroj
• 82,720 points
9,438 views