CODEWITHSUNDEEP
angulartypescriptangular-directive
mmonteirocl
mmonteirocl

Reputation: 469

Angular 9 - My custom directive isn't working as supposed

Before you mark as duplicated this question. I have tried to search other solutions arround but anything has been working for me.

I have a custom directive similar to this one:

(For legal reasons, I cannot show my actual directive, but with this one of example doesn't work either // This directive is of the following tutorial)

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

@Directive({
  selector: '[exampleDirective]',
})
export class ExampleDirective {
  constructor(private elementRef: ElementRef) {}

  @HostListener('mouseenter') onMouseEnter() {
      console.log('Enter')
  }

  @HostListener('mouseleave') onMouseLeave() {
      console.log('Leave')
  }
}

I have generated this directive with the Angular CLI so automaticly is added to the modules.ts

Then in the template HTML I have the following:

<div style="width: 100%;" exampleDirective> Come over me! </div>

Where the exampleDirective is the selector we set in the custom directive.

The case is that this directive isn't working, is not printing the messages by console so it seems that isn't applying the directive to my div. Any thoughts about what could be ??

[Doens't show any error by console / Compiling angular / Building the app]

Upvotes: 2

Views: 8958

Answers (2)

Lei Chi
Lei Chi

Reputation: 269

I resolve the problem by change the directive name to appXXXDiretive, the name in your directive selector.

Upvotes: 0

mmonteirocl
mmonteirocl

Reputation: 469

Found the solution.

The problem was that the CLI adds the import in declarations in the module.

But doesn't add it in the exports. Adding it there solves my error.

Upvotes: 4

Related Questions