How to Create Lowercase convert autometically in angular using directive (for textbox , text control)

 How to Create Lowercase convert autometically in angular using directive 


1).Directive code 

// Usage example: <input lowercasedirective />


import { ElementRefHostListenerDirectiveAfterContentChecked } from '@angular/core';

@Directive({
    selector: 'input[lowercasedirective]'
})

export class LowercaseDirective implements AfterContentChecked {

    @HostListener('keyup', ['$event.target'])

    onInput(inputHTMLInputElement): void {
        this.lowercase();
    }
    constructor(public elementElementRef) {
    }
    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

Featured Post

how to find n number of nodes have child or cildren

 how to find n number of nodes have child or cildren for that we use recursive function  const   data = {     'id' : '0' ,...

Popular Posts