Angular 17 の制御フロー: 開発エクスペリエンスを向上させる

​Ignite UI for Angularコンポーネント内でのAngular開発エクスペリエンスを向上させるには、最適化された組み込み制御フローのための新しいブロックテンプレート構文を採用することができます。この強力な機能により、コードが簡素化され、型チェックが改善され、バンドル サイズが縮小され、パフォーマンスが向上します。それでは、いくつかのコード サンプルに飛び込んで、構文の動作を見てみましょう。

Try Ignite UI for Angular

Angularの組み込み制御フローとは何ですか?

Angularの "制御フロー" という用語は、Angularアプリケーション内でステートメントとディレクティブが実行される順序を指します。Angular 17 では、制御フローを管理するための新しい最適化された組み込み構文 (@if、@switch、@for) があり、開発者は実行フローをより細かく制御できます。これにより、開発者はほとんどのプログラミング言語でおなじみのパターンに近づくことができ、アプリケーションビューの構築におけるエラーが最小限に抑えられます。これは直接使用でき、追加のインポートなしでテンプレートですぐに使用できます。

Angular 17 では、制御フローは洗練された変更検出システムによって管理され、アプリケーションの状態変更をビューに効率的に適用します。これは、最新の対話型Webアプリケーションを構築するための強固な基盤のプロバイダーとしてのAngularの役割を強調しています。

条件ステートメントから始める

あなたがする必要があるのは、 *ngIf と *ngSwitch を新しい構文でアップグレードして、より直感的でクリーンなコードにすることです。

@if

IgxGrid の IgxColumn テンプレート内の@ifを条件付きレンダリングに利用します。

<igx-column field="Discontinued" header="Discontinued" [sortable]="true" [dataType]="'boolean'"> 
    <ng-template igxCell let-cell="cell" let-val> 
        @if (val) { 
            <img src="assets/active.png" title="Continued" alt="Continued" />
        } @else { 
            <img src="assets/expired.png" title="Discontinued" alt="Discontinued" /> 
        } 
    </ng-template> 
</igx-column> 

IgxColumn のデモ@if

@switch 

動的アイコン選択のために、IgxSelect コンポーネントの IgxSelectItem 内に @switch ディレクティブを適用します。

<igx-select-item [value]="fruit.type" class="select__entry" [text]="fruit.type">
    {{fruit.type}}
    @switch (fruit.delivery) {
    @case ('flight') { <igx-icon>flight</igx-icon> }
    @case ('train') { <igx-icon>train</igx-icon> }
    @case ('boat') { <igx-icon>directions_boat</igx-icon> }
    }
</igx-select-item>

IgxSelect のデモ@switch

次に、組み込みのforループについて話しましょう

新しい組み込みのforループにより、レンダリング速度が速くなります。

@for

これにより、多くのユースケースを理解できます。この例では、IgxDropDown を使用しています。

@for (town of towns | startsWith:townSelected; track town.name) {
    <igx-drop-down-item [value]="town">
        {{town}}
    </igx-drop-down-item>
}

Demo For Loop in IgxDropDown 

または、グリッドの列をループします。

@for(c of columns; track c.field) {
    <igx-column
    [field]="c.field"
    [header]="c.field"
    [cellStyles]="c.cellStyles">
    </igx-column>
}

IgxGridのForループのデモ 

遅延読み込みの遅延ビュー

新しい遅延可能ビューを活用して、宣言型の強力なアプローチで遅延読み込みを強化します。この新機能により、IgxList コンポーネントのリスト項目の遅延読み込みを作成できます。これらは、ボタンがクリックされた後に表示されます。

<igx-list #fruitList>
    @defer (on interaction(b1)) {
        @for(fruit of fruitsData; track fruit) {
            <igx-list-item igxRipple igxRippleTarget=".igx-list__item-content">
                {{ fruit }}
            </igx-list-item>
        }
    } @placeholder {
        <button #b1 type="button" igxButton="raised">Click here to trigger interaction</button>
    }
</igx-list>

IgxList を使用したデモの遅延表示 

複合サンプル

必要に応じて、前述のすべての機能を統合したより包括的な例を調べることができます。ここでは、ナビゲーションドロワーの主なコンテンツを延期できます。ナビゲーションからアイテムを選択した直後に読み込まれます。

@defer(on interaction(drawer)) {
  <span igxButton="icon" igxToggleAction="navigation">
    <igx-icon family="material">menu</igx-icon>
  </span>
  <h5>{{selected}}</h5>
  @switch(selected) {
    @case('Grid') {
      <app-grid-adf-style-sample></app-grid-adf-style-sample>
    }
    @case('Autocomplete') {
      <app-autocomplete></app-autocomplete>
    }
    @default {
      <app-reactive-form-validation></app-reactive-form-validation>
    }
  }
} @placeholder {
  <span>Pick a component from nav drawer to load...</span>
}

[ネットワーク] タブをチェックして、アプリケーションの初期読み込み時間とリソースを確認できます。ナビゲーションドロワーのメインコンテンツを延期しているため、これがロードされます。

また、ユーザーがアイテムを選択すると、ビューのコンテンツとリソースが読み込まれます。

遅延ビューのサイズによっては、読み込み時間を大幅に増やすことができます。遅延ビューの詳細については、こちらを参照してください。 また、ナビゲーションアイテムのリストは、新しい構文で実現できます。

@for(item of navItems; track item.name) {
  <span igxDrawerItem igxRipple (click)="navigate(item)">
    <igx-icon family="material">{{ item.name }}</igx-icon>
    <span>{{ item.text }}</span>
  </span>
}

また、サンプルのビューの 1 つには、この機能を利用して検証、アイコン、ヒントを表示するリアクティブ フォーム入力があります。

<igx-input-group>
    <label igxLabel for="password">Password</label>
    <input igxInput name="password" [type]="showPassword ? 'text' : 'password'" formControlName="password" />
    @if (password.errors?.minlength) {
        <igx-hint >Password should be at least 8 characters</igx-hint>
    }
    @if (password.value) {
        <igx-icon igxSuffix (click)="showPassword = !showPassword">
            {{ togglePasswordVisibility }}
        </igx-icon>
    }
</igx-input-group>

はじめる

Angularプロジェクトをバージョン17にアップグレードして、組み込みの制御フローを今すぐお試しください。既存のプロジェクトで使用するため。開発者エクスペリエンスの向上を確認し、Angularアプリケーションの性能を向上させましょう。

強化されたAngular制御フローでコーディングをお楽しみください!