CODEWITHSUNDEEP
angulartypescriptag-gridag-grid-angular
Omer Gafla
Omer Gafla

Reputation: 46

Angular ag-grid CellRenderer renders HTML String as is

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

Answers (1)

Fletch
Fletch

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

Related Questions