CODEWITHSUNDEEP
angulartypescript
Alex
Alex

Reputation: 6109

Angular directive gives error when using addEventListener when refactoring the functions

I have made a directive to make a drop down menu work on my header. For now I am doing it the vanilla JavaScript way instead of using the hostListeners property on the @Directive decorator. The code used to work until I refactored the functions as their own functions instead of anonymous functions.

import { Directive, OnInit, ElementRef, OnDestroy } from '@angular/core';

@Directive({
    selector: '[headerDropdown]'
})
export class HeaderDropdownDirective implements OnInit, OnDestroy {

    private isActive: boolean;
    private isAbove: boolean;

    private dropDownElement: Element;
    private downArrowElement: Element;

    constructor(private elementRef: ElementRef) { }

    ngOnInit() {
        this.dropDownElement = document.querySelector('.header__dropdown');
        this.downArrowElement = this.elementRef.nativeElement;

        this.downArrowElement.addEventListener('mouseenter', this.downArrowOnMouseEnter);
        this.downArrowElement.addEventListener('mouseleave', this.downArrowOnMouseLeave);
        this.downArrowElement.addEventListener('click', this.downArrowOnClick);
        document.addEventListener('click', this.documentOnClick);
    }

    ngOnDestroy() {
        // TODO: removeEventListener
    }

    private activate() {
        this.isActive = true;
        this.downArrowElement.classList.add('header__item--active');
        this.dropDownElement.classList.add('header__dropdown--active');
    }

    private deActivate() {
        this.isActive = false;
        this.downArrowElement.classList.remove('header__item--active');
        this.dropDownElement.classList.remove('header__dropdown--active');
    }

    private downArrowOnMouseEnter() {
        this.isAbove = true;
    }

    private downArrowOnMouseLeave() {
        this.isAbove = false;
    }

    private downArrowOnClick() {
        if (!this.isActive) {
            this.activate();
        } else {
            this.deActivate();
        }
    }

    private documentOnClick() {
        if (!this.isAbove) {
            this.deActivate();
        }
    }

}

The error I get when I click or just interact with the downArrow button:

EXCEPTION: this.activate is not a function
ErrorHandler.handleError @ VM12616:55
next @ VM12615:374
schedulerFn @ VM12630:100
SafeSubscriber.__tryOrUnsub @ VM12634:236
SafeSubscriber.next @ VM12634:185
Subscriber._next @ VM12634:125
Subscriber.next @ VM12634:89
Subject.next @ VM12631:55
EventEmitter.emit @ VM12630:86
NgZone.triggerError @ VM12629:335
onHandleError @ VM12629:296
ZoneDelegate.handleError @ zone.js?fad3:246
Zone.runTask @ zone.js?fad3:154
ZoneTask.invoke @ zone.js?fad3:345
VM12616:60 ORIGINAL STACKTRACE:
ErrorHandler.handleError @ VM12616:60
next @ VM12615:374
schedulerFn @ VM12630:100
SafeSubscriber.__tryOrUnsub @ VM12634:236
SafeSubscriber.next @ VM12634:185
Subscriber._next @ VM12634:125
Subscriber.next @ VM12634:89
Subject.next @ VM12631:55
EventEmitter.emit @ VM12630:86
NgZone.triggerError @ VM12629:335
onHandleError @ VM12629:296
ZoneDelegate.handleError @ zone.js?fad3:246
Zone.runTask @ zone.js?fad3:154
ZoneTask.invoke @ zone.js?fad3:345
VM12616:61 TypeError: this.activate is not a function
    at HTMLDivElement.HeaderDropdownDirective.downArrowOnClick (eval at <anonymous> (main.js:3477), <anonymous>:49:18)
    at ZoneDelegate.invokeTask (eval at <anonymous> (main.js:5060), <anonymous>:275:35)
    at Object.onInvokeTask (eval at <anonymous> (main.js:1076), <anonymous>:266:37)
    at ZoneDelegate.invokeTask (eval at <anonymous> (main.js:5060), <anonymous>:274:40)
    at Zone.runTask (eval at <anonymous> (main.js:5060), <anonymous>:151:47)
    at HTMLDivElement.ZoneTask.invoke (eval at <anonymous> (main.js:5060), <anonymous>:345:33)
ErrorHandler.handleError @ VM12616:61
next @ VM12615:374
schedulerFn @ VM12630:100
SafeSubscriber.__tryOrUnsub @ VM12634:236
SafeSubscriber.next @ VM12634:185
Subscriber._next @ VM12634:125
Subscriber.next @ VM12634:89
Subject.next @ VM12631:55
EventEmitter.emit @ VM12630:86
NgZone.triggerError @ VM12629:335
onHandleError @ VM12629:296
ZoneDelegate.handleError @ zone.js?fad3:246
Zone.runTask @ zone.js?fad3:154
ZoneTask.invoke @ zone.js?fad3:345
VM12634:240 Uncaught TypeError: this.activate is not a function
    at HTMLDivElement.HeaderDropdownDirective.downArrowOnClick (eval at <anonymous> (main.js:3477), <anonymous>:49:18)
    at ZoneDelegate.invokeTask (eval at <anonymous> (main.js:5060), <anonymous>:275:35)
    at Object.onInvokeTask (eval at <anonymous> (main.js:1076), <anonymous>:266:37)
    at ZoneDelegate.invokeTask (eval at <anonymous> (main.js:5060), <anonymous>:274:40)
    at Zone.runTask (eval at <anonymous> (main.js:5060), <anonymous>:151:47)
    at HTMLDivElement.ZoneTask.invoke (eval at <anonymous> (main.js:5060), <anonymous>:345:33)

But if I change the code into this, then it works:

import { Directive, OnInit, ElementRef, OnDestroy } from '@angular/core';

@Directive({
    selector: '[headerDropdown]'
})
export class HeaderDropdownDirective implements OnInit, OnDestroy {

    private isActive: boolean;
    private isAbove: boolean;

    private dropDownElement: Element;
    private downArrowElement: Element;

    constructor(private elementRef: ElementRef) { }

    ngOnInit() {
        this.dropDownElement = document.querySelector('.header__dropdown');
        this.downArrowElement = this.elementRef.nativeElement;

        this.downArrowElement.addEventListener('mouseenter', () => { this.isAbove = true; });
        this.downArrowElement.addEventListener('mouseleave', () => { this.isAbove = false; });

        this.downArrowElement.addEventListener('click', () => {
            if (!this.isActive) {
                this.activate();
            } else {
                this.deActivate();
            }            
        });

        document.addEventListener('click', () => {
            if (!this.isAbove) {
                this.deActivate();
            }            
        });
    }

    ngOnDestroy() {
        // TODO: removeEventListener
    }

    private activate() {
        this.isActive = true;
        this.downArrowElement.classList.add('header__item--active');
        this.dropDownElement.classList.add('header__dropdown--active');
    }

    private deActivate() {
        this.isActive = false;
        this.downArrowElement.classList.remove('header__item--active');
        this.dropDownElement.classList.remove('header__dropdown--active');
    }

}

I don't understand the problem. I also tried to make the functions not private, but still it did not work and I get the same error.

Upvotes: 0

Views: 284

Answers (1)

eko
eko

Reputation: 40657

Change 

this.downArrowElement.addEventListener('mouseenter', this.downArrowOnMouseEnter);
this.downArrowElement.addEventListener('mouseleave', this.downArrowOnMouseLeave);
this.downArrowElement.addEventListener('click', this.downArrowOnClick);
document.addEventListener('click', this.documentOnClick);

to

 this.downArrowElement.addEventListener('mouseenter', this.downArrowOnMouseEnter.bind(this));
 this.downArrowElement.addEventListener('mouseleave', this.downArrowOnMouseLeave).bind(this);
 this.downArrowElement.addEventListener('click', this.downArrowOnClick.bind(this));
 document.addEventListener('click', this.documentOnClick.bind(this));

your this is not refering to the directive under these functions.

Upvotes: 2

Related Questions