[Ignite UI for Angular 10.2 新機能] IGX_INPUT_GROUP_TYPE の導入

Ignite UI for Angular 10.2.7 バージョン時点での情報に基づいています。

IGX_INPUT_GROUP_TYPE を利用することで、IgxInputGroup のタイプをグローバルで一括設定できるようになりました。

app.module

...
import { IGX_INPUT_GROUP_TYPE, IgxInputGroupModule } from 'igniteui-angular';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    BrowserAnimationsModule,
    IgxInputGroupModule
  ],
  providers: [{provide: IGX_INPUT_GROUP_TYPE, useValue: 'box' }],
  bootstrap: [AppComponent]
})
export class AppModule {
}

app.component.html

全ての IgxInputGroup に type=”box” が適用されます。

<article class="sample-column">
  <form>
      <igx-input-group style="margin: 1rem;">
          <input igxInput name="firstName" type="text" />
          <label igxLabel for="firstName">First Name</label>
      </igx-input-group>
      <igx-input-group style="margin: 1rem;">
          <input igxInput name="lastName" type="text" />
          <label igxLabel for="lastName">Last Name</label>
      </igx-input-group>
  </form>
</article>

実行結果