angular-ngx-mask-input

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
• Usage
• Derivates Table
• Output Events

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