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 duplicate item from array using multiple object keys in angular or javascript

 how to find duplicate item from array using multiple object keys There is a way to find based of multiple key find duplicate records in ang...

Popular Posts