Pass parameter to Angular 4 directive on input

Question

I have an input text field like this

<input type="text" class="form-control"  [inputTextFilter]="A" [ngModel]="name">

and my directive is:

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

@Directive({
  selector: '[inputTextFilter]'
})

export class InputTextFilterDirective {
  @Input('inputTextFilter') params: string;

  @HostListener('keypress', ['$event'])
  onKeyUp(event: KeyboardEvent) {
    console.log('got parameters: '+this.params);
  }
}

and I have created a Directive called "inputTextFilter" to which I want to pass the "A" parameter. My passed parameter always shows as undefined.

score 22 · Accepted Answer · edited Jun 20 '20 at 09:12

22

Try this.

Update:

import {Directive, SimpleChanges} from '@angular/core';

@Directive({
  selector: '[inputTextFilter]'
})
export class MyDirective {
  @Input('inputTextFilter') params: string;
  constructor(){}
  ngOnInit(){
     console.log(this.params)
  }
}

edited Jun 20 '20 at 09:12

Community

1
1

answered Sep 19 '17 at 14:26

Gary

2,293
2
25
47

2

I think that format is depricated, but I used @Input('inputTextFilter') params: string; and params is undefined – TSG Sep 19 '17 at 14:29
Where did you try to fetch params and is it defined in the first place in the input tag – Gary Sep 19 '17 at 14:32
It still prints Undefined – TSG Sep 19 '17 at 14:56
4

[inputTextFilter]="A" if A i a variable and inputTextFilter="A" if "A" is a string – Gary Sep 19 '17 at 15:34

score 5 · Answer 2 · answered Sep 19 '17 at 15:18

5

In the hope that this helps someone else...the problem is in the template.

When I pass the input as [myDirective]="A" the A is being intpreted as an undefined variable. Since I wanted to pass the letter A I should have said [myDirective]="'A'"

answered Sep 19 '17 at 15:18

TSG

4,242
9
61
121

@yurzui Please mark this as the answer. I would want to upvote it. Seems like it was all a working code and TSG is sending string into directive rather than a variable – Gary Sep 19 '17 at 15:33

score 3 · Answer 3 · answered Sep 19 '17 at 14:27

3

Try like this in directive :

import {Directive, Input, ElementRef} from 'angular2/core';
@Directive({
    selector: '[inputTextFilter]'
})
class FocusDirective {
    @Input() inputTextFilter: any;
    protected ngOnChanges() {
         console.log('inputTextFilter', this.inputTextFilter);
    }
}

answered Sep 19 '17 at 14:27

Chandru

10,864
6
38
53

I've added my directive code in the original question. Looks almost identical to what you have, but params is always undefined. – TSG Sep 19 '17 at 14:39

Pass parameter to Angular 4 directive on input

3 Answers3

Update:

Linked