Cannot create a custom click Directive for Hyperlink in Angular

Question

I have followed all of the steps mentioned on Creating a Custom Debounce Click Directive in Angular and tried to use this custom directive for a hyperlink as shown below:

directive.ts:

import { Directive, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output } 
    from '@angular/core';
import { Subject, Subscription } from 'rxjs';
import { debounceTime } from 'rxjs/operators';

@Directive({
    selector: '[appDebounceClick]'
})
export class DebounceClickDirective implements OnInit, OnDestroy {
    @Input() debounceTime = 500;
    @Output() debounceClick = new EventEmitter();
    private clicks = new Subject();
    private subscription: Subscription;

    constructor() { }

    ngOnInit() {
        this.subscription = this.clicks.pipe(
            debounceTime(this.debounceTime)
        ).subscribe(e => this.debounceClick.emit(e));
    }

    ngOnDestroy() {
        this.subscription.unsubscribe();
    }

    @HostListener('click', ['$event'])
    clickEvent(event) {
        event.preventDefault();
        event.stopPropagation();
        this.clicks.next(event);
    }
}

.html:

<a appDebounceClick (debounceClick)="delete()" [debounceTime]="700"></a>

I also make necessary import definitions in app.module.ts and my-component.ts. But when debugging it I encounter "Can't bind to 'debounceTime' since it isn't a known property of 'a'" error. Do I need to define a custom click event in the directive? If so how?

<a appDebounceClick (debounceClick)="delete()" [debounceTime]="700" (click)="delete()"></a> — Dhaval Patel
– Dhaval Patel, Commented Jun 25, 2019 at 11:21
"Can't bind to 'debounceTime' since it isn't a known property of 'a'" sounds suspiciously like you didn't add the directive to the module and thus it's not imported. — That White Eyebrow Guy
– That White Eyebrow Guy, Commented Jun 25, 2019 at 11:26
Can't bind to 'debounceTime' since it isn't a known property of 'a' means the [debounceTime] input you apply on your link isn't recognized. Seems like your code osn't the issue, so please provide a minimal reproducible example of it. — user4676340
– user4676340, Commented Jun 25, 2019 at 11:31
@SargoDarya that's not it, the error is very specific and comes from a misued @Input syntax such as [debounceTime]="500" — user4676340
– user4676340, Commented Jun 25, 2019 at 11:35
@Maryannah Well, it might not be recognised because the import of the directive is missing. That's usually the error you get when you try to pass something to an input which isn't registered, probably through a missing import in the module. Just to be clear, judging from the available code, that's the only possibility that it's missing from the declarations and the module is the only thing which isn't posted here. The mentioned tutorial also doesn't mention that this is necessary. — That White Eyebrow Guy
– That White Eyebrow Guy, Commented Jun 25, 2019 at 12:03

Muhammed Albarmavi · Accepted Answer · 2019-06-25 11:44:21Z

3

if you create the directive in different module than app.module you also need to add the directive class to the exports section of that module decorator this will make sure it is accessible outside the module

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ DebounceClickDirective ], 
  exports:[ DebounceClickDirective ], // 👈

})
export class CustomesModule { }

app.template.html

<a appDebounceClick (debounceClick)="delete()" [debounceTime]="700" >click me 🎯 </a>

demo 🔥🔥

edited Jun 25, 2019 at 11:44

answered Jun 25, 2019 at 11:32

Muhammed Albarmavi

24.5k9 gold badges72 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user4676340 Over a year ago

Consider upvoting the comment explaining it instead of posting an answer. Also, that's not the issue.

Muhammed Albarmavi Over a year ago

@Maryannah the user already said its already imported then after test his code seem to me he forget to add the directive class to the exports section

user4676340 Over a year ago

Well it seems to you, but that's not it. Try reproducing the issue and you'll see it for yourself.

Muhammed Albarmavi Over a year ago

@Maryannah this demo base of his code stackblitz.com/edit/angular-5hky9b 🤔

user4676340 Over a year ago

No you're right, actually it might be. Sorry, my bad on that one ! I was explaining why it couldn't, be during the explanation, I noticed the issue is very similar to what I have posted myself. Upvoting your answer instead !

Collectives™ on Stack Overflow

Cannot create a custom click Directive for Hyperlink in Angular

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related