Angular 2 Text Mask plain JavaScript example

(function(app) {
  app.AppComponent =
    ng.core.Component({
      selector: 'my-app',
      templateUrl: 'app/app.html',
      directives: [textMask.Directive]
    })
    .Class({
      constructor: function() {
        this.mask = '(111) 111 1111'
        this.myModel = ''
      },
      onMaskChange(event) {
        this.mask = event.target.value
      }
    });
})(window.app || (window.app = {}));


/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

(function(app) {
  document.addEventListener('DOMContentLoaded', function() {
    ng.platformBrowserDynamic.bootstrap(app.AppComponent);
  });
})(window.app || (window.app = {}));


/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

<!DOCTYPE html>
<html>
  <head>
    <title>Angular 2 QuickStart JS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style type="text/css">
      body {
        padding-top: 50px;
      }

      .starter-template {
        padding: 40px 15px;
        text-align: center;
      }
    </style>

    <link rel="stylesheet"
          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

    <!-- 1. Load libraries -->
    <!-- IE required polyfill -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>

    <script src="https://npmcdn.com/zone.js@0.6.12?main=browser"></script>
    <script src="https://npmcdn.com/reflect-metadata@0.1.3"></script>

    <script src="https://npmcdn.com/rxjs@5.0.0-beta.6/bundles/Rx.umd.js"></script>
    <script src="https://npmcdn.com/@angular/core/core.umd.js"></script>
    <script src="https://npmcdn.com/@angular/common/common.umd.js"></script>
    <script src="https://npmcdn.com/@angular/compiler/compiler.umd.js"></script>
    <script src="https://npmcdn.com/@angular/platform-browser/platform-browser.umd.js"></script>
    <script src="https://npmcdn.com/@angular/platform-browser-dynamic/platform-browser-dynamic.umd.js"></script>
    
    <script src="https://npmcdn.com/@msafi/angular2-text-mask@0.2.0/dist/textMask.js"></script>

    <!-- 2. Load our 'modules' -->
    <script src='app/app.component.js'></script>
    <script src='app/main.js'></script>

  </head>

  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>

</html>


<!-- 
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

<div class="container">
  <div class="starter-template">
    <div id="content">
      <form class="form-horizontal">
        <div class="form-group">
          <label for="1" class="col-sm-2 control-label">Masked input</label>

          <div class="col-sm-10">
            <input
              id="1"
              [(ngModel)]="myModel"
              [textMask]="{mask: mask}"
              type="text"
              class="form-control"
            />
          </div>
        </div>

        <div class="form-group">
          <label for="2" class="col-sm-2 control-label">Mask</label>

          <div class="col-sm-10">
            <input
              (keyup)="onMaskChange($event)"
              [value]="mask"
              type="text"
              class="form-control myMask"
              id="2"
              placeholder="Enter mask"
            />
          </div>
        </div>

        <div class="form-group">
          <label for="ngModelValue" class="col-sm-2 control-label">ngModel value</label>
          <div class="col-sm-10">
            <input
              id="ngModelValue"
              [ngModel]="myModel"
              type="text"
              disabled
              class="form-control"
            />
          </div>
        </div>
      </form>
    </div>
  </div>
</div>