Выбор флажка настраиваемого столбца сетки Ag

Question

Я создал заголовок клиента Ag Ag и визуализацию ячейки для выбора флажка, как показано ниже. Я сделал переключение флажка в компоненте заголовка, но понятия не имею, чтобы отразить ячейки, а также на основе выбора флажка.

Эксперт посоветуете пожалуйста?

Пользовательский заголовок сетки

 template: `
    <div>
    <span class="ag-filter-checkbox" (click) ="selectAll()">
      <i
        class="fa"
        [ngClass]="
        toggleCheckbox
            ? 'fa fa-lg fa-check-square-o'
            : 'fa-square-o fa-lg'
        "
      ></i>
    </span>
</div>

selectAll() {
    this.toggleCheckbox = !this.toggleCheckbox;
  }

Компонент TS

this.frameworkComponents = {
      agColumnHeader: AgGridCustomHeaderComponent,
      agColumnFilter: AgGridColumnFilter      
    };

this.gridOptions.api.setColumnDefs([
 {
        headerName: "checkbox",           
        field: "name", valueGetter: (params) => params.data.name.en,
        cellRendererFramework: AgGridCustomCellComponent,
        cellRendererParams: {
          ngTemplate: this.checkBox
        }
      }
]);

gridCellCheckBox(row: any) {
    var index = this.checked.indexOf(row.id);
    if (index > -1) {
      this.checked.splice(index, 1);        
    } else {         
      this.checked.push(row.id);
    }
  }

Пользовательский флажок Шаблон

<ng-template #checkBox let-row>
    <a href="javascript:void(0)" (click)="gridCellCheckBox(row)"><i
        [ngClass]="checked.includes(row.id) ? 'fa fa-check-square-o' : 'fa fa-square-o'"></i>{{row.name.en}}</a>
   </ng-template>