IgxGrid IgxGridToolbarの表示・非表示を動的に切り替える

IgxGridのIgxGridToolbarの表示・非表示を動的に切り替えるには、Angularの*ngIfなどの仕組みを使って表示を切り替えたあと、IgxGridのreflowメソッドとmarkForCheckメソッドを呼び出してIgxGridの再描画をしてください。

<!-- app.component.html -->
<igx-grid #grid1 ...>
  <igx-grid-toolbar *ngIf="show">
    ...
  </igx-grid-toolbar>
    ...
</igx-grid>

// app.component.ts
export class AppComponent {
  ...
  @ViewChild("grid1") grid1: IgxGridComponent;

  public data1: any[];
  public show = false;

  ...

  buttonClick(): void{
    this.show = !this.show;
    this.grid1.reflow();
    this.grid1.markForCheck();
  }
}

　

サンプル

　

APIリファレンス

• reflow
  • https://jp.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#reflow
• markForCheck
  • https://jp.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#markforcheck