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 sent authorized header attribute value using c# .net httpclient for third party api call of oauth 2.0

How to sent authorized header attribute value using C# .NET HTTP client for third party API call of OAuth 2.0 For call token From Authorized...

Popular Posts