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.
If you want to send data to directive then you should try like this: This is my custom directive, and I am going to share two value from component or HTML to the directive. You will have to use your directive in your html and send data to the directive like in below code. I am sending name and value to the test.
@Inoput decorator is used to pass data (property binding) from parent to child component. The component property should be annotated with @Input decorator to act as input property. Let's explore it practically. I have created an angular application which is AngApp. I have created two components.
Passing data to another component is done through property binding. Property binding is used to set properties of target elements or component's @Input() decorators. The value flows from a component's property into the target element property, and you can't use it to read or pull values out of target elements.
Try this.
import {Directive, SimpleChanges} from '@angular/core';
@Directive({
selector: '[inputTextFilter]'
})
export class MyDirective {
@Input('inputTextFilter') params: string;
constructor(){}
ngOnInit(){
console.log(this.params)
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With