AG Grid 셀에서 여러 아이콘 렌더링
2171 단어 aggridfontawesomewebdevangular
최종 결과 🥳
설정
관련 없는 부분을 제거하려고 노력했습니다. 또한 저는 무료 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;
}
}
Reference
이 문제에 관하여(AG Grid 셀에서 여러 아이콘 렌더링), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/lornasw93/rendering-multiple-icons-in-ag-grid-cell-66p텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)