The Angular ag-grid CellRenderer displays HTML String without any modification

I'm currently working with ag-grid and I have a specific need - to include a spinner in each 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>`;
   },
}

However, upon rendering the ag-grid, the result displays a "spinner" tag with the [show] attribute still intact, indicating that it hasn't been properly converted into the spinner component. Is there a way to generate this spinner component directly within the CellRenderer?

(The ag-grid is constructed dynamically, so options like setting the "innerHTML" of a div in the .component.html file won't work for me as suggested by many solutions online).

angulartypescriptag-gridag-grid-angular

Answer №1

Would you mind providing more details about your spinner?

Alternatively, I have a basic spinner set up here (not styled very well!). Can you adjust this plunker to illustrate your problem?

https://plnkr.co/edit/9DnJw74J8x51DDRz?open=app%2Fapp.component.ts

The plunker showcases 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;
  }
}

Incorporated with some CSS 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); }
}

Here is how you can implement it:

{ field: 'athlete', minWidth: 200, cellRenderer: SpinnerCellRenderer },

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

npm is unable to install a forked git repository in its current state

Attempting to install a customized version of ng2-smart-table on my application, but npm seems to be struggling with the process. I've experimented with various commands such as npm install git+http://github.com/myusername/ng2-smart-table.git npm i ...

javascriptangularnpm

Is there a way to retrieve just one specific field from a Firestore query instead of fetching all fields?

I am experiencing an issue where I can successfully output all fields in the console, but I only want to display one specific field. In this case, I am trying to retrieve the ID field but I am encountering difficulties. Below are screenshots illustrating m ...

javascriptangulargoogle-cloud-firestoreangularfire

requirements for navigating within an Angular application

Initially, if the first user is already logged in on the first tab and is redirected to the dashboard, when that same user opens a second tab in the same browser (by pasting the login URL), they are automatically redirected to the dashboard without having ...

angulartypescriptangular6angular-router-guards

What is the best way to restrict a Generic type within a Typescript Function Interface?

Imagine having the following interface definitions: interface SomeInterface {a: string; b: number} interface SomeFunction<T> {(arg: T) :T} The usage of the function interface can be demonstrated like this: const myFun: SomeFunction<string> = a ...

typescripttypescript-generics

Effective ways to properly utilize the kendo-switch angular component for seamless rendering of the "checked" state

I recently started a new project in Angular 4 using CLI and incorporated various Kendo UI components. However, I encountered an issue with the kendo-switch component where it does not toggle correctly when set to checked=true. Instead of toggling from left ...

angularkendo-uiangular-cli

Typing a general d3 selection to target various types of SVG elements

I am looking for a callback function that can be utilized with both rect and circle elements. Here is an example: function commonTasks(selection:d3.Selection<PLACEHOLDER_TYPE, MyDataType, SVGGElement, unknown>) { selection .classed('my-c ...

typescriptd3.js

Unable to render React component after updating its state

After successfully retrieving data from my API, React is failing to render the cards. export default function Subjects() { const userApi = useUserService(); const auth = useRecoilValue(AuthAtom); const [loading, setLoading] = React.useState<boolea ...

reactjstypescriptreact-hooksmaterial-ui

Troubleshooting Angular 7 Build Failure: Missing Typescript .d.ts Declaration Files for Ahead-of-Time Compilation

I have encountered difficulties in building my Angular 7 application after upgrading from v6. When I use ng build, everything runs smoothly. However, when I try either ng serve --aot, ng build --aot, or ng build --prod (which also includes aot), an error ...

angulartypescriptbuildangular7

I'm encountering an issue with my React 18 application using TypeScript: the module './App' cannot be found

Encountering an issue while attempting to update to react 18. I'm curious if this problem is related to my file types. I am using Typescript, so do both the app and index files need to have a .tsx extension? Both the app and index files are located ...

javascriptreactjstypescriptcreate-react-appreact-18

How can the carousel item numbers be adjusted for proper display?

I'm currently working on an Angular app and have encountered a task related to displaying 5 cards using mdbootstrap. I want to showcase these cards in a carousel format, but with a twist - I only want the carousel functionality to be active on mobile ...

cssangularbootstrap-4mdbootstrap

onmouseleave event stops triggering after blur event

I am facing an issue with a mouseleave event. Initially, when the page loads, the mouseleave event functions correctly. However, after clicking on the searchBar (click event), and then clicking outside of it (blur event), the mouseleave functionality stops ...

javascripthtmltypescriptblurmouseleave

What is the best way to exclude multiple properties from an object in JavaScript?

Having two methods that return Pick<T, K> and Omit<T, K> types where Omit is defined as type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>, I am facing difficulty in removing multiple properties from an object. Th ...

typescriptobject

Tips for setting ngModel and name attributes in an angular test for a custom component

Just getting started with angular. I recently developed a custom component that implements the ControlValueAccessor to allow developers to easily access its value. Here's an example of how it can be used: <app-date [label]="'Date 2&apos ...

angulartypescripttestingangular-componentsangular-test

Issue with Angular Routes: Error NG04002 occurs when no routes can be matched with the provided URL Segment

Apologies for any language errors in my communication. I'm currently working on developing a straightforward online store application using Angular. However, I've encountered an issue where trying to access two specific routes, 'home' a ...

angularangular-routing

Error encountered while loading GitHub Pages resource

Currently, I am facing issues while attempting to host an Angular application with Bootstrap 4 on GitHub Pages using angular-cli-ghpages. The URL I am trying to deploy it at is , but I continuously encounter the following error: Failed to load resource: s ...

angulargithub-pagesbootstrap-4

Retrieve a mapping of keys from a generic object structure in TypeScript

I am trying to extract the key map from an object, and although I have created a function for this purpose, TypeScript is not happy with it. How can I resolve this issue without using acc: any? const origin = { a: 1, b: 'string', c: () =&g ...

typescripttypescript-generics

Ways to remove cdk-overlay-container

I am currently working on an Angular project (version 9.1.4) that utilizes ng-bootstrap (version 6.1.0) to display modals. I have observed that whenever a modal is opened, it adds <div class='cdk-overlay-container' /> to the HTML structure. ...

angularng-bootstrap

How should one properly assign an element type provided as an argument?

I'm attempting to define a type for an element passed as a parameter using React.ComponentType. import * as React from "react" type BaseType = { element: React.ComponentType } const Base = ({element: Element}: BaseType) => ( <Ele ...

reactjstypescript

Trigger and intercept events within Angular components

I recently developed an Angular 7 accordion component. You can check out the example on StackBlitz: export class AccordionComponent { @ContentChildren(PanelComponent) panels: QueryList<PanelComponent>; ngAfterContentInit() { this.panels.fo ...

angularangular6angular7

Angular 2: Issue with Component not reinitializing when query parameters change

I am currently working with Angular 2 and the latest router component to create a search functionality. Upon clicking the search button for the first time, the router navigates to the search component and retrieves data from the service. However, I have no ...

angularjsangulartypescript