CODEWITHSUNDEEP
angularangular5
user2024080
user2024080

Reputation: 5101

Directive throw error, not able to understand

I use angular5, in the app I create a directive which throw error. I am not able to understand the issue at all any one help me here?

code :

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

@Directive({
    selector: '[zoom]'
})
export class ZoomDirective {

    constructor(private el:ElementRef, private renderer:Renderer) { 

        @HostListener('mouseenter') onMouseEnter() {
            this.highlight('yellow');
        }

    }

}

error:

cannot find onMouseEnter, did you mean onmouseenter

there i am getting highlighted at : onMouseEnter and this.highlight('yellow'); what is the issue?

angular cli details:

Angular CLI: 1.6.5
Node: 6.11.4
OS: win32 x64
Angular: 5.2.3

Upvotes: 0

Views: 256

Answers (1)

Martin Parenteau
Martin Parenteau

Reputation: 73751

The @HostListener('mouseenter') should be declared outside of the constructor:

export class ZoomDirective {

    constructor(private el:ElementRef, private renderer:Renderer) { }

    @HostListener('mouseenter') onMouseEnter() {
        this.highlight('yellow');
    }

    private highlight(color: string) {
        this.el.nativeElement.style.backgroundColor = color;
    }
}

More examples can be found in the Angular documentation.

Upvotes: 2

Related Questions