Angular CLIを用いてAngularアプリケーションを作成する場合は、次の手順でInputManJSのコンポーネントを使用することができます。

まだAngular CLIがインストールされていない場合は、次のコマンドを実行して、Angular CLIパッケージをグローバルにインストールします。

npm install -g @angular/cli

Angularアプリケーションを作成します。

ng new inputmanjs-angular

アプリケーションプロジェクトのフォルダに移動します。

cd inputmanjs-angular

InputManJS製品に含まれる下記のフォルダを、プロジェクトのsrcフォルダ配下にコピーします。

samples¥angular¥src¥inputmanjs¥

Angular CLI設定ファイル（.angular-cli.json）を開き、下記のようにinputmanjsフォルダの2つのファイルを追加します。

{
　"apps": [
　　{
　　　"styles": [
　　　　"styles.css",
　　　　"inputmanjs/gc.inputman-js.1.0.css"
　　　],
　　　"scripts": [
　　　　"inputmanjs/gc.inputman-js.ja.1.0.js"
　　　],
　　}
　],
}

src/app/app.modules.tsファイルで、InputManModuleモジュールをインポートします。

import { InputManModule } from "../inputmanjs/GcInputMan.module";

@NgModule({
 :
　imports: [
 :
　　InputManModule
　]
})

src/app/app.component.htmlファイルで、InputManJSのマスクコンポーネントを追加します。

<gc-mask [(value)]="maskValue" [formatPattern]="'〒¥¥D{3}-¥¥D{4}'"></gc-mask><br>
値: {{maskValue}}

src/app/app.component.tsファイルで、マスクコンポーネントに設定するデータを作成します。

export class AppComponent {
　maskValue = '1234567';
}

アプリケーションを実行します。

npm start