Reputation: 46
I'm using ag-grid and I want to add a spinner in every cell of my "index" column:
index_col_def = {
headerName: "ID",
field: "index",
cellRenderer: params => {
return `<div><spinner [show]=spinners.row_${params.data.index}>${params.data.index}</div>`;
},
}
but when the ag-grid is rendered, the outcome is a "spinner" tag with the [show] in brackets, meaning it hasn't been really "translated" into the spinner component. is there any way to generate this spinner component within the CellRenderer?
(the ag-grid is built dynamically so I cannot set "innerHtml" of a div since it is not in the .component.html file, as many solutions suggest online).
Upvotes: 0
Views: 977
Reputation: 917
Please could you give a bit more information on your spinner?
Alternatively I've got a very simple spinner working here (not very well styled!), please could you adjust this plunker to demonstrate your issue?
https://plnkr.co/edit/9DnJw74J8x51DDRz?open=app%2Fapp.component.ts
The plunker creates a new cell renderer component:
@Component({
selector: 'medal-component',
template: `{{ this.displayValue }}<div class="loader"></div>`,
})
export class SpinnerCellRenderer implements ICellRendererAngularComp {
public displayValue!: string;
agInit(params: ICellRendererParams<IOlympicData, number>): void {
console.log(params)
this.displayValue = params.value;
}
}
With some styling:
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 20px;
height: 20px;
animation: spin 2s linear infinite;
display: table-cell
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
And this is how to use it:
{ field: 'athlete', minWidth: 200, cellRenderer: SpinnerCellRenderer },
Upvotes: 1