Typescript window resize event

How to trigger resize event in typescript

Question: I tried to trigger resize event in my angular application but it is not working. Edit: If we want to access properties like , you will need to explicitly tell TypeScript the type of your target.

How to trigger resize event in typescript

I tried to trigger resize event in my angular application but it is not working. Getting error like

Property ‘init UIEvent ‘ does not exist on type ‘UIEvent’. Did you mean ‘ initevent ‘?

I do not know why I am getting this error. How to resolve this issue?

This is all you need. Widely supported.

window.dispatchEvent(new Event("resize")); 

If you have objects that resize on the page and they’re not inside the window resize event to perform their task this won’t touch those elements.

the easer way to subscribe to resize is using fromEvent of rxjs operators

fromEvent(window, 'resize').pipe( debounceTime(200) ).subscribe(() => < . your code here. >) 

You can use in a ngOnInit or in a function after click a button:

Ah!, if you don’t put in the app.component, don’t forget unsubscribe see the stackblitz

NOTE: I add a debouncetime to not execute «each time»

Lit element (typescript) not re-rendering when, When the window resize event is triggered, the re-computation is happening properly but the updated properties not re-rendered. Just to test out, I added a dummy button and after resizing the window, called the same re-compute function on click. This however is triggering a re-render properly. Adding the code …

Global events didn’t change the local variable’s value

Global events ( window.onresize ) didn’t change the local variable’s value.

export class TestComponent implements OnInit < a: number = 0; b: number = 0; ngOnInit() < window.onresize = () =>< this.a = 10; this.b = 10; >; > >

Bind to global events using host binding (this is mentioned in the API docs, deep inside the DirectiveMetadata page):

@Component(< selector: 'my-app', template: `
Resize window and look at console log. 
<> >` >) export class AppComponent < @HostListener('window:resize') onResize() < this.a++; this.b++; console.log(this.a, this.b, event) >> 

Your original code does not work because you monkey-patched the onresize handler (that Angular had originally monkey-patched) to your own function. So, Angular no longer has a way to run change detection after the event handler finishes. Using host binding keeps the Angular monkey-patch in place, hence it does not disable change detection , hence your view will update after the resize event fires .

didn’t change the local variable’s value

From your screenshot I can see that this.b = 10 so it did change the variable value.

In the picture you also see a: number = 0 . That is just the value of a since the last breakpoint. You can see this.a is also 10

I just solved a similar problem by forcing the update code to run in the Angular Zone. The documentation I followed is at https://angular.io/docs/js/latest/api/core/index/DirectiveMetadata-class.html (current as of today 10/8/16).

Something like this should work:

import from '@angular/core'; constructor(private _ngZone: NgZone) < >ngOnInit() < window.onresize = () => < this._ngZone.run(() => < this.a = 10; this.b = 10; >>; > 

This is simpler than Mark Rajcok’s answer in this question, however NG2 is still a moving target so no doubt what I have written is one of the improvements that have been made (eg. the link to DirectiveMetadata no longer exists).

Typescript on window resize Code Example, Experimental support for decorators is a feature that is subject to change in a future release. Set the ‘experimentalDecorators’ option in your ‘tsconfig’ or ‘jsconfig’ to remove this warning. check if column exists in dataframe. input event typescript. timeout typescript. react onclick typescript type.

Call a function when window is resized

How can I call for this(or any) JS function to be run again whenever the Browser window is resized?

You can use the window onresize event:

window.onresize = setEqualHeight; 

You can subscribe to the window.onresize event (See here)

window.onresize = setEqualHeight; 

window.addEventListener('resize', setEqualHeight); 

This piece of code will add a timer which calls the resize function after 200 milliseconds after the window has been resized. This will reduce the calls of the method.

var globalResizeTimer = null; $(window).resize(function() < if(globalResizeTimer != null) window.clearTimeout(globalResizeTimer); globalResizeTimer = window.setTimeout(function() < setEqualHeight(); >, 200); >); 

You use jquery, so bind it using the .resize() method.

Call a function when window is resized, This piece of code will add a timer which calls the resize function after 200 milliseconds after the window has …

React + TypeScript: Type error on resize event

How to fix this type error?

 const onResize = ( event: React.UIEvent, ) => < console.log(event.target); >; window.addEventListener("resize", onResize); 

No overload matches this call. Overload 1 of 2, '(type: "resize", listener: (this: Window, ev: UIEvent) => any, options?: boolean | AddEventListenerOptions | undefined): void', gave the following error. Argument of type '(event: React.UIEvent) => void' is not assignable to parameter of type '(this: Window, ev: UIEvent) => any'. Types of parameters 'event' and 'ev' are incompatible. Type 'UIEvent' is missing the following properties from type 'UIEvent': nativeEvent, isDefaultPrevented, isPropagationStopped, persist Overload 2 of 2, '(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void', gave the following error. Argument of type '(event: React.UIEvent) => void' is not assignable to parameter of type 'EventListenerOrEventListenerObject'. Type '(event: React.UIEvent) => void' is not assignable to type 'EventListener'. Types of parameters 'event' and 'evt' are incompatible. Type 'Event' is missing the following properties from type 'UIEvent': detail, view, nativeEvent, isDefaultPrevented, and 2 more. TS2769 

I think in this case you can use the «Event» interface.

const onResize = ( event: Event, ) => < console.log(event.target); >; 

This line is saying that the type Event (from onResize ) is missing some properties that UIEvent doesn’t provide.

Edit: If we want to access properties like event.target.screen , you will need to explicitly tell TypeScript the type of your target.

The way to do it is using a generic type to cast it to a proper type:

const onResize = (event: Event) =>

This will let TypeScript know that the target is of type window , that way it will know the screen property.

JavaScript window resize event, Never override the window.onresize function. Instead, create a function to add an Event Listener to the object or element. This checks and incase the listeners don’t work, then it overrides the object’s function as a last resort. This is the preferred method used in libraries such as jQuery. object: the element or …

Источник

Mastering the Window Resize Event in JavaScript, jQuery, TypeScript, and Angular

Learn how to trigger, handle, and optimize the window resize event using JavaScript, jQuery, TypeScript, and Angular. Follow best practices, tips, and tricks, and use `ResizeObserver` for better performance. Read now and improve your web development skills!

• Triggering the Window Resize Event in JavaScript
• Handling the Window Resize Event in JavaScript
• Waiting for the End of the Resize Event and Performing an Action Using JavaScript
• Triggering the Window Resize Event in jQuery, TypeScript, and Angular
• Using ResizeObserver Instead of the Resize Event for Performance
• Other quick code samples for triggering the window resize event in JavaScript
• Conclusion
• How to trigger window resize in JavaScript?
• How do I trigger a window resize event?
• How to handle window resize in JavaScript?
• How do you call a function on window resize?

The window resize event is an essential aspect of web development that allows developers to make design changes and optimize the user experience. In this blog post, we will discuss the various ways to trigger and handle the Window Resize Event using JavaScript, jQuery, TypeScript, and Angular. We will also cover best practices, tips, and tricks to handle the event efficiently and how to wait for the end of the resize event and perform an action using JavaScript.

Triggering the Window Resize Event in JavaScript

To trigger the resize event in JavaScript, there are two methods that we can use. The first method is to use window.dispatchEvent(new Event(‘resize’)) , and the second method is to use $(window).trigger(‘resize’) .

Using window.dispatchEvent(new Event(‘resize’))

This method dispatches a new event to the window object that can be captured using an event listener. Here’s an example:

window.dispatchEvent(new Event('resize')); 

Using $(window).trigger(‘resize’)

This method uses jQuery to trigger the resize event. Here’s an example:

Both methods work in a similar way, but the $(window).trigger(‘resize’) method is more concise and easy to read. It is important to note that using jQuery to trigger the resize event is only necessary if you’re already using jQuery in your project.

Handling the Window Resize Event in JavaScript

To handle the resize event in JavaScript, we can use the window.addEventListener(‘resize’, function()<>) method. This method adds an event listener to the window object and captures the event when it occurs. Here’s an example:

window.addEventListener('resize', function()< // handle resize event here >); 

It is important to handle the resize event efficiently to avoid performance issues. One way to do this is to use a debounce function that waits for a certain amount of time before performing an action. This can be achieved using the setTimeout() and clearTimeout() functions.

var timeoutId; window.addEventListener('resize', function() < clearTimeout(timeoutId); timeoutId = setTimeout(function() < // handle resize event here >, 500); >); 

This code waits for 500 milliseconds before performing the action, which can be adjusted to fit your needs.

Waiting for the End of the Resize Event and Performing an Action Using JavaScript

To wait for the end of the resize event and perform an action using JavaScript, we can use the setTimeout() and clearTimeout() functions as mentioned earlier. Here’s an example:

var timeoutId; window.addEventListener('resize', function() < clearTimeout(timeoutId); timeoutId = setTimeout(function() < // perform action after resize event has ended >, 500); >); 

Using this method ensures that the action is performed only after the resize event has ended.

Triggering the Window Resize Event in jQuery, TypeScript, and Angular

To trigger the resize event in jQuery, we can use the $(window).trigger(‘resize’) method as mentioned earlier. Here’s an example:

To trigger the resize event in TypeScript, we can use window.onresize = () => <> . Here’s an example:

To trigger the resize event in Angular, we can use window.dispatchEvent(new Event(‘resize’)) and listen to the event using HostListener . Here’s an example:

@HostListener('window:resize', ['$event']) onResize(event) < // handle resize event here >

Using ResizeObserver Instead of the Resize Event for Performance

ResizeObserver is a newer API that was introduced to handle the limitations of the resize event. It is a better option than using the resize event for performance. The ResizeObserver API allows us to observe changes to an element’s size and perform an action when it changes.

const resizeObserver = new ResizeObserver(entries => < // handle resize event here >);resizeObserver.observe(element); 

Using ResizeObserver ensures that the action is performed only when the element’s size has changed.

Other quick code samples for triggering the window resize event in JavaScript

//listen for window resize event window.addEventListener('resize', function(event)< var newWidth = window.innerWidth; var newHeight = window.innerHeight; >);

In Javascript , for example, trigger window resize code example

// Cross-browser solution (IE support) var resizeEvent = window.document.createEvent('UIEvents'); resizeEvent.initUIEvent('resize', true, false, window, 0); window.dispatchEvent(resizeEvent);

In Javascript , in particular, js trigger window resize code example

window.dispatchEvent(new Event('resize'));

Conclusion

The window resize event is a crucial aspect of web development, and it is important to know how to trigger and handle it efficiently. Using vanilla JavaScript, jQuery, TypeScript, and Angular, developers can trigger and handle the event in various ways. By following best practices and using ResizeObserver , developers can optimize the user experience and avoid performance issues.

Источник