I have created a simple directive to trim my input text (I plan to expand it's functionality later - so please don't recommend a simple onkeyup function), I would like to make a directive work.
I use my directive like this:
<input type="text" class="form-control" inputTextFilter [(ngModel)]="data.name">
and my directive is as follows:
import { Directive, HostBinding, HostListener } from '@angular/core';
@Directive({
selector: '[inputTextFilter]'
})
export class InputTextFilterDirective {
value: string;
constructor() {
console.log('contrusted InputTextFilterDirective');
this.value = '';
}
@HostListener('change')
onChange($event) {
console.log('in change InputTextFilterDirective');
this.value = $event.target.value.trim();
console.log(this.value);
}
}
I see the constructor message log to the window, but the on change message never appears, and my value never changes (spaces aren't trimmed from end). I suspect hostListeners and hostProperties aren't right as I've seen lots of conflicting examples...but can't confirm a right way.
What's wrong with this?
Input data into a DirectiveWe can also extend or modify the behavior or functionality of a directive by inputtting data into the directive.
What is meant by directives in Angular? Directives are classes that add new behavior or modify the existing behavior to the elements in the template. Basically directives are used to manipulate the DOM, for example adding/removing the element from DOM or changing the appearance of the DOM elements.
In Angular, Directives are defined as classes that can add new behavior to the elements in the template or modify existing behavior. The purpose of Directives in Angular is to maneuver the DOM, be it by adding new elements to DOM or removing elements and even changing the appearance of the DOM elements.
What is an Angular Directive? Directives are the functions which will execute whenever Angular compiler finds it. Angular Directives enhance the capability of HTML elements by attaching custom behaviors to the DOM.
Change your directive to
import { Directive, HostBinding, HostListener, ElementRef } from '@angular/core';
@Directive({
selector: '[inputTextFilter]'
})
export class InputTextFilterDirective {
@Input() ngModel: string;
constructor(private el: ElementRef) {
console.log('constructed InputTextFilterDirective');
(el.nativeElement as HTMLInputElement).value = '';
}
@HostListener('change')
onChange() {
console.log('in change InputTextFilterDirective');
(this.el.nativeElement as HTMLInputElement).value.trim();
console.log(this.ngModel);
}
}
Try and see if that works. If it didn't, try changing the event from 'change
' to 'input
' or 'ngModelChange
'
Here you go:
import { Directive, ElementRef, HostListener } from '@angular/core';
@Directive({
selector: '[trim-text]'
})
export class TrimTextDirective {
constructor(
private el: ElementRef,
) {}
@HostListener('blur')
// @HostListener('input')
@HostListener('change')
applyTrim() {
let ele = this.el.nativeElement as HTMLInputElement;
if (typeof ele.value === 'string') {
ele.value = ele.value.trim();
}
}
}
If you uncomment "@HostListener('input')" you wont be able to write spaces (in case you want to trim the sides and allow having spaces in between)
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