How to specifically activate window resize when the width changes

Question

How to specifically activate window resize when the width changes

I am looking to implement custom styling on an element based on the current screenWidth of the window.

This can be achieved using the following @HostListener:

 @HostListener('window:resize', ['$event'])
  public resize() {

   // Apply styles here depending on current window.innerWidth...

  }

However, I only want the resize method to be triggered when the width of the window changes, and not when the height changes.

Currently, the resize method is called even if the user changes the window height, causing issues with my styling logic!

My question is: Is there a way in Angular to create something like ('window:resizeX') that will call resize() only when the window width changes, ignoring any changes in window height?

angular typescript resize

Answer 1

Answer №1

One effective way to handle window resize events is by using the following code snippet:

fromEvent(window, 'resize')
  .pipe(map(() => window.innerWidth), distinctUntilChanged())
  .subscribe(() => this.onResize());

If you wish to optimize this further, you can incorporate auditTime() as shown below:

fromEvent(window, 'resize')
  .pipe(auditTime(100), map(() => window.innerWidth), distinctUntilChanged())
  .subscribe(() => this.onResize());

This will ensure that your method is not triggered more frequently than every 100ms.

Answer 2

One effective way to handle window resize events is by using the following code snippet:

fromEvent(window, 'resize')
  .pipe(map(() => window.innerWidth), distinctUntilChanged())
  .subscribe(() => this.onResize());

If you wish to optimize this further, you can incorporate auditTime() as shown below:

fromEvent(window, 'resize')
  .pipe(auditTime(100), map(() => window.innerWidth), distinctUntilChanged())
  .subscribe(() => this.onResize());

This will ensure that your method is not triggered more frequently than every 100ms.

Answer 3

Answer №2

There are two main methods commonly used to observe resizing:

Utilizing the fromEvent method with window as the target
Implementing the @HostListener decorator for 'window:resize' events

Each approach offers unique advantages depending on individual preference and specific use case needs.

To explore a comparison between these techniques, refer to fromevent window vs hostlistener.

If you encounter an issue related to screen resizing, Oleg suggested a solution involving the fromEvent operator. Alternatively, you can consider resolving it using the HostListener approach, similar to the example below:

private lastScreenWidth;
....

ngAfterViewInit(){
    this.lastScreenWidth = window.innerWidth;
}

@HostListener('window:resize', ['$event'])
private resize(event) {
    if (event.target.innerWidth !== this.lastScreenWidth) {
        // Implement actions based on window width changes
        this.lastScreenWidth = event.target.innerWidth;
    }
}

Answer 4

There are two main methods commonly used to observe resizing:

Utilizing the fromEvent method with window as the target
Implementing the @HostListener decorator for 'window:resize' events

Each approach offers unique advantages depending on individual preference and specific use case needs.

To explore a comparison between these techniques, refer to fromevent window vs hostlistener.

If you encounter an issue related to screen resizing, Oleg suggested a solution involving the fromEvent operator. Alternatively, you can consider resolving it using the HostListener approach, similar to the example below:

private lastScreenWidth;
....

ngAfterViewInit(){
    this.lastScreenWidth = window.innerWidth;
}

@HostListener('window:resize', ['$event'])
private resize(event) {
    if (event.target.innerWidth !== this.lastScreenWidth) {
        // Implement actions based on window width changes
        this.lastScreenWidth = event.target.innerWidth;
    }
}

Answer 5

Answer №3

Oleg Postoev has the correct idea, that is the most effective approach.

This particular version will only trigger if the width remains constant for a short period (800ms);

fromEvent(window, 'resize').pipe(
  debounceTime(800),
  tap((event: UIEvent) => {
    const width = event.target['innerWidth'];
    // PERFORM AN ACTION
  }, takeUntil(this.unsubscribe$)) // CLEANUP
).subscribe();

Answer 6

Oleg Postoev has the correct idea, that is the most effective approach.

This particular version will only trigger if the width remains constant for a short period (800ms);

fromEvent(window, 'resize').pipe(
  debounceTime(800),
  tap((event: UIEvent) => {
    const width = event.target['innerWidth'];
    // PERFORM AN ACTION
  }, takeUntil(this.unsubscribe$)) // CLEANUP
).subscribe();

How to specifically activate window resize when the width changes

Answer №1

Answer №2

Answer №3

Similar questions

TS-2304 Error - 'Iterable' not found in TypeScript when trying to import 'jquery' into a '.ts' file

Transforming every piece of TypeScript code into JavaScript on the server-side

Despite the presence of the element, ngIf fails to render it on the screen

Invoking a function in an Angular 4 component using a <td> element

What is the proper way to define the type of an object when passing it as an argument to a function in React using TypeScript?

How to refresh a page manually in Angular 2

Every time I make updates, I have to reload the page to see the changes take effect

The module '@/assets/icons/pay/pay-success.png' cannot be located, along with its corresponding type declarations.ts

What could be causing Bootstrap to fail in my fresh Angular project?

Creating a custom URL in a React TypeScript project using Class components

Receiving warnings during npm installation and encountering difficulties with fixing issues using npm audit fix

What is the process for transforming a JSON object into a TypeScript interface?

Tips for parsing a JSON file within an Ionic app?

Translate Firestore value updates into a TypeScript object

Tips for passing an array between components in Angular 2

Verify whether a web application is equipped with React, Angular, or Vue

Does manipulating the context before retrieving it within a custom ContextProvider adhere to best practices?

What is the best way to assign ngModel to dynamically inserted input rows in Angular 4+ (specifically in a mat-table)?

Different Approaches for Handling User Interactions in Angular Instead of Using the Deferred (Anti-?)Pattern

The directive for angular digits only may still permit certain characters to be entered