как поменять иконку, когда статус активен или не активен в ag-grid angular

Question

HTML*

   <ng-template #actionButtons let-data="data">
      <div class="cell-actions">
        <a href="javascript:;" (click)="assign()">
          <i nz-icon nzType="user-add" nzTheme="outline"></i>
        </a>
    
        <i nz-icon nzType="user-delete" nzTheme="outline"></i>
      </div>
    </ng-template>

TS

  ngOnInit() {
    this.getData();
  }

  onGridReady(event: any) {
    this.columnDefs = this.colParser.parseConfigColumnDefs(this.columnDefs, this.actionButtons);
  }

  getData() {
    this.assets.getAll({ start: 1, length: 999, type: this.data.assetType.code }).pipe(take(1)).subscribe((res: any) => {
      res.data.map((data: any) => {
        this.row$.push({
          id: data.id,
          status: data.status
        });
      });

      this.rowData$.next(this.row$,);
    })
  }

  assign() {
    
  }

Что я пытаюсь сделать сделайте здесь, когда статус АКТИВЕН, он будет отображать это <i nz-icon nzType="user-add" nzTheme="outline"></i>, но статус НЕАКТИВЕН, он должен отображать это <i nz-icon nzType="user-delete" nzTheme="outline"></i> вместо <i nz-icon nzType="user-add" nzTheme="outline"></i>.

Answer 1

Вы можете использовать valueFormatter в столбце для отображения значка в зависимости от статуса:

 { headerName: 'Status', field: 'status', valueFormatter: statusFormatter }

function statusFormatter(params) {
  return params.value==='ACTIVE'? '<i nz-icon nzType="user-add" nzTheme="outline"></i>' : '<i nz-icon nzType="user-delete" nzTheme="outline"></i>';
}