[Ignite UI for Angular 10.2 新機能] IgxToggleDirective 展開と縮小をキャンセルする

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

IgxToggleDirective の展開時、縮小時に発生するイベントに、展開と縮小の可否を制御する cancel プロパティが追加されました。

<div style="margin: 1rem;">
  <div style="display: flex; flex-direction: row;">
    <div style="margin-right: 1rem;">
      展開をキャンセル<input type="checkbox" #cancelOpening>
    </div>
    <div>
      縮小をキャンセル<input type="checkbox" #cancelClosing>
    </div>
  </div>
  <button igxToggleAction="toggleId" class="toggle-button" igxButton="raised">Toggle</button>
  <div igxToggle id="toggleId" class="toggle-content"
      (onOpening)="onOpeningHandler($event, cancelOpening)"
      (onClosing)="onClosingHandler($event, cancelClosing)">
      <section class="toggle-section">
          <h6>Toggled by the service provider</h6>
      </section>
  </div>
</div>

  public onOpeningHandler(args: ToggleViewCancelableEventArgs, cancelOpening: HTMLInputElement): void {
    if (cancelOpening.checked) {
      args.cancel = true;
    }
  }
  public onClosingHandler(args: ToggleViewCancelableEventArgs, cancelClosing: HTMLInputElement): void {
    if (cancelClosing.checked) {
      args.cancel = true;
    }
  }