AG Grid 셀에서 여러 아이콘 렌더링

최종 결과 🥳





설정



관련 없는 부분을 제거하려고 노력했습니다. 또한 저는 무료 Font Awesome 아이콘과 AG Grid의 커뮤니티 에디션을 사용하고 있습니다.

배포 목록 구성 요소



TS



열 정의를 설정할 때 새로운 셀 렌더러 구성 요소를 포함합니다.

{
  field: 'DeployedBy', 
  cellRendererFramework: IconCellRendererComponent 
}


아이콘 셀 렌더러 컴포넌트



TS




import { Component } from "@angular/core";
import { ICellRendererAngularComp } from 'ag-grid-angular';
import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
import { faUsers, faCity } from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-icon-cell-renderer',
  templateUrl: './icon-cell-renderer.component.html'
})
export class IconCellRendererComponent implements ICellRendererAngularComp {
  faUsers = faUsers;
  faCity = faCity;

  params: any;
  icons: IconDefinition[]; // ✨ if wanting just the 1 icon change to `IconDefinition`

  agInit(params: any): void {
    this.params = params;
    if (this.params.value === 'Teamcity') {
      this.icons = [faUsers, faCity];
    }

    return this.params.value;
  }

  refresh(): boolean {
    return false;
  }
}


HTML



이것저것 정리중입니다.

<span *ngIf="icons != null; else notSys">
  <span *ngFor="let icon of icons">
    <fa-icon [icon]="icon"></fa-icon>
  </span>
</span>
<ng-template #notSys>
  {{params.value}}
</ng-template>


스타일링




@almost-black: #262626;

ag-grid-angular.ag-theme-material {
  .ag-row .ag-cell fa-icon { 
    margin-left: 2px;
    margin-right: 2px;
    color: @almost-black; 
  }
}

좋은 웹페이지 즐겨찾기