Angularで使用する方法

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

Angular 17以降でInputManJSを使用する場合

Angular 17以降では、新しいプロジェクトを作成すると、スタンドアロンコンポーネントがデフォルトで使用されるようになりました。InputManJS V5.0以降では、Angularのスタンドアロンコンポーネント機能に対応するようになり、次の手順で利用できます。

まだAngular CLIがインストールされていない場合は、次のコマンドを実行して、Angular CLIパッケージをグローバルにインストールします。
```
npm install -g @angular/cli
```
Angularアプリケーションを作成します。
```
ng new inputmanjs-angular
```
アプリケーションプロジェクトのフォルダに移動します。
```
cd inputmanjs-angular
```
InputManJSのAngularパッケージをインストールします。
```
npm install @mescius/inputman.angular
```
src/styles.cssファイルで、スタイルをインポートします。
```
@import '@mescius/inputman/CSS/gc.inputman-js.css';
```

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

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { InputManModule } from '@mescius/inputman.angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet,InputManModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  maskValue = '1234567';
}

src/app/app.component.htmlファイルで、InputManJSのマスクコンポーネントを追加します。
```
<gc-mask [(value)]="maskValue" [formatPattern]="'〒\\D{3}-\\D{4}'"></gc-mask>
```
アプリケーションを実行します。
```
npm start
```

Angularのスタンドアロンコンポーネントは、他のモジュールに依存せずに単独で動作するため、必要な機能だけをインポートでき、アプリケーションを大幅に軽量化できます。これにより、従来のようにapp.module.tsファイルでモジュールのインポートを宣言する必要はなく、app.component.ts ファイルに直接インポートして使用することができます。

Angular 16でInputManJSを使用する場合

まだAngular CLIがインストールされていない場合は、次のコマンドを実行して、Angular CLIパッケージをグローバルにインストールします。
```
npm install -g @angular/cli
```
Angularアプリケーションを作成します。
```
ng new inputmanjs-angular
```
アプリケーションプロジェクトのフォルダに移動します。
```
cd inputmanjs-angular
```
InputManJSのAngularパッケージをインストールします。
```
npm install @mescius/inputman.angular
```
src/styles.cssファイルで、スタイルをインポートします。
```
@import '@mescius/inputman/CSS/gc.inputman-js.css';
```

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

import { InputManModule } from '@mescius/inputman.angular';

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

src/app/app.component.htmlファイルで、InputManJSのマスクコンポーネントを追加します。
```
<gc-mask [(value)]="maskValue" [formatPattern]="'〒\\D{3}-\\D{4}'"></gc-mask>
```
src/app/app.component.tsファイルで、マスクコンポーネントに設定するデータを作成します。
```
export class AppComponent {
  maskValue = '1234567';
}
```
アプリケーションを実行します。
```
npm start
```