angular-ngx-mask-input
v2.0.0
Published
Table of contents =================
Downloads
6
Readme
Angular-Input-Mask
angular-ngx-mask-input is a library of Angular that allows you to mask and unmask elements.
Table of contents
Getting started
Step 1: Install angular-ngx-mask-input
:
NPM
npm i angular-ngx-mask-input
Step 2: Import the InputMaskModule:
import {InputMaskModule} from 'angular-ngx-mask-input';
@NgModule({
declarations: [AppComponent],
imports: [InputMaskModule],
bootstrap: [AppComponent]
})
export class AppModule {}
Usage
<div *ngFor="let entity of entities; let index = index" style="display: block;">
<ngx-inline-edit (onStateChange)="updateField(entity.name)">
<ng-template view>
{{entity.name}}
</ng-template>
<ng-template mask>
<span [innerHtml]="'********'"></span>
</ng-template>
</ngx-inline-edit>
<ngx-inline-edit (onStateChange)="updateField(entity.isAdmin)">
<ng-template view>{{entity.isAdmin}}</ng-template>
<ng-template mask>
<span [innerHtml]="'********'"></span>
</ng-template>
</ngx-inline-edit>
</div>
Derivates Table
| Derivative Name | Description | | ------------- | ------------- | | focusable | It makes the input field to be focusable. | | editable | It registers an event listener, which calls the component’s method whenever the user clicks ‘enter’ to change its state from mask to view. | view | It is responsible for exposing a reference to their TemplateRef (For View). | mask | It is responsible for exposing a reference to their TemplateRef (For Masking).
Output Events
Currently Only one event is emitted which is onStateChange. This is emitted when we switch back to mask mode from view mode using this we can check whether new value is equal to old value or use it for any other purpose.
Author
- [Sam Arora]
License
MIT