IgxInputGroup コントロールの利用

IgxInputGroup コントロールを利用する方法を紹介します。

１．IgxInputGroupModule のインポート

IgxInputGroup コントロールを利用するには、 アプリケーションモジュールで IgxInputGroupModule をインポートします。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { IgxInputGroupModule } from 'igniteui-angular'; // 追加
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    IgxInputGroupModule // 追加
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

２．IgxInputGroup コントロールの実装

IgxInputGroup コントロール(igx-input-group タグ)を実装し、内側に input タグを配置します。その input タグに IgxInput ディレクティブを付与してテキスト入力用のコントロールを表示します。

<igx-input-group class="input-group">
  <label igxLabel for="lastName">姓</label>
  <input igxInput name="lastName" type="text" [(ngModel)]="lastName" />
</igx-input-group>

<igx-input-group class="input-group">
  <label igxLabel for="firstName">名</label>
  <input igxInput name="firstName" type="text" [(ngModel)]="firstName" />
</igx-input-group>

３．実行結果