Custom Directive Inputs returning error Angular 5

Question

I have this custom directive I'm setting up like so..

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

@Directive({
    selector: '[pieceRate]'
})
export class PieceRateDirective {
    @HostListener('input', ['$event'])
    @Input() dollarMax: string;
    @Input() centMax: string;
    onkeydown(event: KeyboardEvent) {
      const input = event.target as HTMLInputElement;
      console.log(this.dollarMax);
      console.log(this.centMax);
  }
}

I have it imported in a shared module that gets imported into my main module so..

Shared Module

import { PieceRateDirective} from '@app/directives...'
...

@NgModule({
   imports..
   declarations: [
     PieceRateDirective
   ],
   exports: [
      PieceRateDirective
   ]
})

Main Module

import { SharedModule } from '@app/shared.module';
...

@NgModule({
   imports: [
      SharedModule
   ]
})
...

So that all appears to be working fine, but when I actually try and use my directive like so..

<input
   pieceRate
   [dollarMax]="rangeTo?.toString().split('.')[0]"
   [(ngModel)]="dollarPieceRate"
   type="number" >

and type in a number i get this error

TypeError: jit_nodeValue_10(...).dollarMax is not a function

I'm not sure what could be causing this issue..

Any help would be appreciated!

Try moving the two @Input lines above the @HostListener (which should be followed immediately by onKeyDown). — Martin Parenteau
– Martin Parenteau, Commented Oct 16, 2018 at 0:15
grrrr I just spent 5 mins working that out lol ... glad you fixed it — danday74
– danday74, Commented Oct 16, 2018 at 0:22

Martin Parenteau · Accepted Answer · 2018-10-16 00:38:03Z

1

The @HostListener decorator is used the associate a handler to an event. In the present case, the declaration of onkeydown should follow immediately the decorator:

export class PieceRateDirective {

  @Input() dollarMax: string;
  @Input() centMax: string;

  @HostListener('input', ['$event'])
  onkeydown(event: KeyboardEvent) {
    ...
  }
}

answered Oct 16, 2018 at 0:38

Martin Parenteau

74k13 gold badges137 silver badges158 bronze badges

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

Comments

Avin Kavish · Accepted Answer · 2018-10-16 00:27:53Z

0

You have to apply the host listener to the function and not the input string.

export class PieceRateDirective {
  @Input() dollarMax: string;
  @Input() centMax: string;

  @HostListener('input', ['$event'])
  onkeydown(event: KeyboardEvent) {
    const input = event.target as HTMLInputElement;
    console.log(this.dollarMax);
    console.log(this.centMax);
  }
}

answered Oct 16, 2018 at 0:27

Avin Kavish

9,0872 gold badges27 silver badges39 bronze badges

Collectives™ on Stack Overflow

Custom Directive Inputs returning error Angular 5

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related