How to Create Lowercase convert autometically in angular using directive
// Usage example: <input lowercasedirective />
import { ElementRef, HostListener, Directive, AfterContentChecked } from '@angular/core';
@Directive({
selector: 'input[lowercasedirective]'
})
export class LowercaseDirective implements AfterContentChecked {
@HostListener('keyup', ['$event.target'])
onInput(input: HTMLInputElement): void {
this.lowercase();
}
constructor(public element: ElementRef) {
}
ngAfterContentChecked(): void {
this.lowercase();
}
lowercase(): void {
const element = this.element.nativeElement;
if (element.value != null && element.value != '') {
element.value = element.value.toLowerCase();
}
}
}
How to use in html
2).Use in html
<input matInput type="text" [readonly]="false" formControlName="EmailID" id="EmailID"
name="EmailID" class="form-control" maxlength="50" lowercasedirective />
2).Import in Moduel
a).declare
import {LowercaseModule } from '../../../directive/lowercase/lowercase.module';
b).import
LowercaseModule
No comments:
Post a Comment
Thank You For Your Great Contribution