Angular 2 Attribute Directive Javascript Example

This is the Javascript version of Angular 2 Attribute Directive Example. In this example, we will be creating 2 custom attribute directives in Javascript: –

  • uppercase – namely, convert input into uppercase
  • mask – display view value in a given pattern

Folder

The folder structure and files of this example. The source code is available here.

Angular 2 Attribute Directive Javascript Example folder

uppercase.directive.js

This directive simply converts user input into uppercase.

mask.directive.js

This directive takes mask pattern string as an input, converts view value of user input in a format of that pattern. The actual model value is not changed. For example: – use mask=(**) **** **** on a phone number input will be displaying phone number as (03) 1234 1234  while the actual model value is 0312341234 .

app.component.js

The root component that registers the 2 directives.

app.component.tpl.html

Template of the root component.

boot.js

index.html

Result

Angular 2 Attribute Directive Typescript Example result

Resources


facebooktwittergoogle_plusredditlinkedin

Wayne Hong

Passionate Java full stack developer.