Trouble with the edit icon not appearing on ag-grid

Software Version:

  • Angular: 10.0.10

  • @angular/cli 10.0.6

To add Bootstrap, I used the following commands

  • npm install @coreui/angular --save
  • npm install bootstrap

Check out the code below:

app.module.ts

@NgModule({
     bootstrap: [AppComponent]
      })

registraion.component.cs

import { Component, OnInit  } from '@angular/core';
import { BackendserviceService } from '../backendservice.service';

@Component({
  selector: 'app-registration',
  templateUrl: './registration.component.html',
  styleUrls: ['./registration.component.css']
})

export class RegistrationComponent implements OnInit {

   columnDefs = [
    { headerName: 'empid', field: 'empid' },
    { headerName: 'username', field: 'username' },
    { headerName: 'empaddress', field: 'empaddress' },
    { headerName: 'password', field: 'password' },
    { headerName: 'country', field: 'country' },
    {
      headerName: 'Edit',
      template:
        '<span><i class="fa fa-edit" data-action-type="edit"></i></span>',
    }
  ];

After clicking on the edit icon and inspecting the page, you can view the screenshots here:

https://i.sstatic.net/Rz5XU.png

https://i.sstatic.net/b77F2.png

Answer №1

Update this line

template: '<span><i class="fa fa-edit" data-action-type="edit"></i></span>',

to

cellRenderer: () => '<span><i class="fa fa-edit" data-action-type="edit"></i></span>',

For more information, refer to the cell renderer section

There are various ways to integrate font-awesome icons, but for a quick setup, include the font-awesome css file in your index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.1.0/css/all.css"
    />
  </head>
</html>

Live Demo

https://codesandbox.io/s/aggrid-font-awesome-qov44?fontsize=14&hidenavigation=1&theme=dark

Answer №2

To implement a custom cell rendering in Ag-grid, you can use the cellRenderer function.

cellRenderer: (params) => {return '<span><i class="fa fa-edit" data-action-type="edit"></i></span>'}

For more information on how to create custom cell renderers in Ag-grid, check out this link - https://www.ag-grid.com/javascript-grid-cell-rendering-components/

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

Unable to generate a file on Firebase platform

I've made updates to my firestore rules, and while the simulator is working correctly, I'm encountering an insufficient permissions error when creating a new document. Below are the firebase rules in question: match /users/{usersid} { a ...

Refreshing Component in Angular2 and Ionic2

I have a main component with several customizable properties that can be utilized in the following manner: <mydisplay [info]="current" [maximum]="maxValue"></mydisplay> Throughout my project, different types of data require display progress. ...

The functionality of Ionic 3 native plugins suddenly ceased to function. After attempting to add ngx at the end, the red line error disappeared. However, the plugin still

import { Market } from '@ionic-native/market/ngx'; constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen, private market: Market ) { this.initializeApp(); this.m ...

Why is it that Chart.js fails to render in a child component, yet works perfectly in the parent component?

I attempted to create a chart in a parent component using a child component but encountered some difficulties. Here is my code: Parent component: @Component({ selector: 'app-tickets', template: '<canvas id="newChart">< ...

Is it possible to implement addControl in a seamless manner while working with forms that are strongly typed?

Upon encountering the scenario of adding a control dynamically to a form, an issue arises related to the definition of bar in the structure of the form. The error message advises making it an optional property, as outlined in the documentation: In a stro ...

Encountering a TypeScript error when trying to establish a connection to MariaDB using node

working with mariadb npmjs version: 2.1.2 import mariadb from "mariadb"; const pool = mariadb.createPool({host: process.env.DBHOST, user: process.env.DBUSER, password: process.env.DBPASS, port: process.env.DBPORT, connectionLimit: process.env.DBCONNLIMIT, ...

Clicking on a component in Nuxt will trigger it to open

Is there a way to trigger a modal window to open when a button is clicked without storing the modal window in the header? file header: <template> <section class="header"> <div class="header-container"> ...

Creating an Angular project with two different base-href configurations

Angular CLI: 7.2.3 Node: 10.14.1 OS: darwin x64 Angular: 7.2.2 Currently, my index.html file includes a base href set to <base href="/" /> and the application runs at http://localhost:port/ I am wondering if there is a way for my app to run both at ...

Validating Components that Adhere to an Interface

When working with Angular, there is a need to specify the type for a component that implements a particular interface and is passed into a class. For example, consider Class A with the following signature: class A { constructor(public component: ?) {} } ...

Why is NestJs having trouble resolving dependencies?

Recently delving into NestJs, I followed the configuration instructions outlined in https://docs.nestjs.com/techniques/database, but I am struggling to identify the issue within my code. Error: Nest cannot resolve dependencies of the AdminRepository ...

Encountering a runtime issue with socket.io when using typescript that has been bundled by

Recently, I attempted to implement web sockets using socket.io in a Node server written in TypeScript with ExpressJS and bundled with Webpack. The server code is structured as follows: import * as Express from "express"; import * as SocketIO from "socket ...

What steps can be taken to expand the axis space in recharts to accommodate an additional label?

I'm struggling to display an additional label below my X-Axis label as it keeps getting clipped off. https://i.sstatic.net/ftI7w.png Below is the code snippet for my XAxis: <XAxis type="number" tick={<CustomizedNumberTick lang={props ...

Recursive object types in Typescript allow for defining complex data structures

I am looking to create a type/interface that can store properties of the same type as itself. For Instance: type TMessagesFormat = { [key: string]: string }; interface TMessages { messages: TMessagesFormat; } interface TGro ...

Module '. ' or its corresponding type declarations cannot be located

While working on my project with TypeScript and using Cheerio, I encountered an issue when trying to compile it with TSC. The compiler threw the following exception: error TS2307: Cannot find module '.' or its corresponding type declarations. 2 ...

Information will be visible on the page only upon refreshing the browser

I'm having trouble grasping the concept of asynchronicity in Angular. When using the REST API, my data only shows up after refreshing the page. I'm not sure how to make it display immediately upon using the API. Additionally, I often encounter er ...

Is it necessary to include @types/ before each dependency in react native?

I am interested in converting my current react native application to use typescript. The instructions mention uninstalling existing dependencies and adding new ones, like so: yarn add --dev @types/jest @types/react @types/react-native @types/react-test- ...

Access data in an array using a specific index in Typescript

Here is the JSON format I am working with: { "records": [ { "ID": "4", "TYPE": "landscape", "FIMAGE": "viewveni.jpg", "COUNT": "4444" } ], "pagination": { "count": 1, "page": 1, "limit": 10, "totalpages": 1 } } I'm facing a challenge trying to retri ...

Difficulty displaying SVGs in VueJS when using Typescript

I'm facing a strange issue that seems like it should be easy to solve. When using Vue with JavaScript as CDN, everything works perfectly (just like it does in Angular or any other framework). <img src="/assets/images/icons/myicoin.svg> However ...

Error: Firebase encountered an issue as there is an existing Firebase App named '[DEFAULT]' with conflicting options or configuration details (app/duplicate-app)

https://i.sstatic.net/jdc0C.png This is the complete code I have written: import { initializeApp } from "firebase/app"; import { getAuth } from "firebase/auth"; const firebaseConfig = { apiKey: "APIKEY", authDomain: "AUTHDOMAIN", projectId: "P ...

Exploring the functionality of window.matchmedia in React while incorporating Typescript

Recently, I have been working on implementing a dark mode toggle switch in React Typescript. In the past, I successfully built one using plain JavaScript along with useState and window.matchmedia('(prefers-color-scheme dark)').matches. However, w ...