Angular 2: Custom Directive which detects screen resize

Question

I want to create a custom directive which can detect the change in browser height and width.

My Directive:

        import { Directive, ElementRef, Input, NgZone} from '@angular/core';

        @Directive({ selector: '[resize]' })
        export class ResizeDirective {
            constructor(private ngZone: NgZone) {
                window.onresize = (e) => {
                    //ngZone.run will help to run change detection
                    this.ngZone.run(() => {
                        console.log("Width: " + window.innerWidth);
                        console.log("Height: " + window.innerHeight);
                    });
                };
            }
        }

app.module.ts:

            import { NgModule, CUSTOM_ELEMENTS_SCHEMA  } from '@angular/core';


            import { BrowserModule } from '@angular/platform-browser';
            import { ResizeDirective } from './resize.directive';

            @NgModule({
                imports: [
                    BrowserModule,
                    FormsModule,
                ],
                declarations:
                [AppComponent, ResizeDirectiv],               
                bootstrap: [AppComponent],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]

            })

I have placed my directive inside the Body tag of the app.component.html. So whenever the browser screen size changes, I need to perform specific operation.

app.component.html

            <div class="outterContainer" style="width:100%;height:100%;"  resizePlugin>
            <div id="header1" class="header">


            </div>

            <div id="contentSection" class="content">
            <div>
                <div>Resize Demo</div>
                <input [(ngModel)]="studname">{{studname}}
                <createProject></createProject>
                <AddEvent></AddEvent>
                <h2>NavBar + Routing + DragAndDrop + ModalPopup + ReAgrrange Demo</h2>',

            </div>  

            <div>
                <div>
                    <h2>NavBar + Routing + DragAndDrop + ModalPopup Demo</h2>
                    <navbar></navbar>
                    <router-outlet></router-outlet>
                </div>
            </div>
            </div>
            </div>

Am I doing something wrong? Is there anyway I could modify this directive to make it listen for browser screen size change?

Angular directives only work within the template of an Angular component. Angular components only work within other Angular components, except these who are listed in `bootstrap: [...]` or the app-module. — Günter Zöchbauer, May 22 '17 at 08:11
Hi @GünterZöchbauer, I have also tried changing the directive to the app.component.html but it doesn't work. Am I missing anything else ? — Kishore L, May 22 '17 at 08:41
No idea what you mean with "have also tried". Perhaps you can update your question with what you "also tried". If you want to add some Angular stuff here and there to a page that is not built with Angular, Angular is probably not the right framework for you. — Günter Zöchbauer, May 22 '17 at 08:47
Have you checked if the constructor of the directive gets called? — Günter Zöchbauer, May 22 '17 at 09:40
Your code seems fine. The size is changed and shows in console. [Plnkr](https://embed.plnkr.co/BQUvDv4EqooMycvnSq6D/). — Draco Apollyon, May 22 '17 at 10:10
@DracoApollyon Very strange. But it works in plnkr! Thank you. — Kishore L, Jun 05 '17 at 10:20

Shahid Ahmad · Answer 1 · 2017-09-12T07:19:28.083

it might look like there is a problem with in your directive. angular does not listen for an event that you passed directly angular has a decorator for listening to an event which is @HostListener. Please try below code it might help you

import { Directive, ElementRef, Input, NgZone,HostListener} from '@angular/core';

    @Directive({ selector: '[resize]' })
    export class ResizeDirective {
        constructor(private ngZone: NgZone) {}
        @HostListener('window:resize', ['$event'])
        onResize(event){
                //ngZone.run will help to run change detection
                this.ngZone.run(() => {
                    console.log("Width: " + window.innerWidth);
                    console.log("Height: " + window.innerHeight);
                });
        }
    }

Replaced `window.onresize` with `window:resize` and added the missing import for `HostListener` from `@angular/core` and this works like a charm! Also this seems to be the 'angular way'. — lentschi, Sep 06 '17 at 10:22

score -1 · Answer 2 · edited Nov 12 '18 at 12:11

-1

you have written ResizeDirectiv in your app.component.html, but there is an additional e at the end of the declaration ResizeDirectiv'e' in your app.module.ts

They need to be the same in order to map.

edited Nov 12 '18 at 12:11

Mohit Kanwar

2,962
7
39
59

answered Nov 12 '18 at 08:08

pmarcb

1

2

Consider editing your answer. https://stackoverflow.com/help/how-to-answer – ETO Nov 12 '18 at 08:25
it's that i write them different ?. – pmarcb Nov 17 '18 at 13:19

Angular 2: Custom Directive which detects screen resize

2 Answers2