Tips for updating the icon based on the active or inactive status in ag-grid within an angular application

HTML*

   <ng-template #actionButtons let-data="data">
      <div class="cell-actions">
        <a href="javascript:;" (click)="assign()">
          <i nz-icon nzType="user-add" nzTheme="outline"></i>
        </a>

        <i nz-icon nzType="user-delete" nzTheme="outline"></i>
      </div>
    </ng-template>

TS

  ngOnInit() {
    this.getData();
  }

  onGridReady(event: any) {
    this.columnDefs = this.colParser.parseConfigColumnDefs(this.columnDefs, this.actionButtons);
  }

  getData() {
    this.assets.getAll({ start: 1, length: 999, type: this.data.assetType.code }).pipe(take(1)).subscribe((res: any) => {
      res.data.map((data: any) => {
        this.row$.push({
          id: data.id,
          status: data.status
        });
      });

      this.rowData$.next(this.row$,);
    })
  }

  assign() {
    
  }

The objective here is to display the

<i nz-icon nzType="user-add" nzTheme="outline"></i>
icon when the status is ACTIVE. When the status is NOTACTIVE, it should display the
<i nz-icon nzType="user-delete" nzTheme="outline"></i>
instead of the
<i nz-icon nzType="user-add" nzTheme="outline"></i>
.

Answer №1

One way to customize the display of icons based on status in a column is by using the valueFormatter:

 { headerName: 'Status', field: 'status', valueFormatter: statusFormatter }

function statusFormatter(params) {
  return params.value==='ACTIVE'? '<i nz-icon nzType="user-add" nzTheme="outline"></i>' : '<i nz-icon nzType="user-delete" nzTheme="outline"></i>';
}

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

Protractor: Moving further down the page

One issue I encountered is with a button on my page that becomes visible only when the user scrolls down. As a result, Protractor tests are throwing an error: UnknownError: unknown error: Element is not clickable at point (94, 188). I attempted to reso ...

Where is the source of this ever-changing image?

Recently, I decided to dive into the world of jQuery and experiment with a plugin carousel. However, I must admit it is all a bit overwhelming for me at the moment. Currently, I have the plugin installed and I am struggling to get rid of the bottom scroll ...

Whenever npm or ng-packagr are updated, the publishing process may attempt to use an incorrect package name or version

Following the transition to [email protected], [email protected], and Angular@13, I am encountering difficulties while attempting to publish a package generated by ng-packager to the npm repository. This is the content of the package.json file: ...

Unable to locate the module name loaded using require() function

Within my React file, I am importing a Javascript file like this (I am using Typescript): let FloDialog = require('../public/js/flo-dialog.min'); Afterwards, I declare a property for the dialog class: dialog: FloDialog = null; It is important ...

jQuery providing incorrect measurements for an element's height

I am encountering an issue with obtaining the height of the #header element in my AngularJS application. Despite using jQuery, the returned height seems to be incorrect. The current code snippet looks like this: $(document).ready(function() { function ...

Icons in Semantic-UI: Facing Difficulty in Accessing ("CORS Request Not HTTP"

Here's an example I'm working on: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Understanding - Main</title> <link rel="stylesheet" type="text/css" href="../semantic/dist/semanti ...

I'm currently in a situation where I'm trying to update a dependency, but it seems that

I am currently facing a challenge updating Angular from version 12 to version 16. My goal is to integrate the three.js library into my project, which requires Angular CLI version 16 or higher. Although I have successfully updated angular/cli to version 1 ...

Look into the data with vue.js, but there's not much

1. As a newcomer to vue.js, I encountered some surprising issues while experimenting with examples. The first one arose when I assigned an id to the body tag and included the following JavaScript code: <html> <head> <meta charset="utf-8 ...

How to disable the ripple effect of a parent button in Material UI when clicking on a nested child button?

Attempting to nest one button within another (IconButton inside ListItem with the button prop) is proving challenging. The issue lies in the fact that the ripple animation of the ListItem is triggered even when clicking on the IconButton. Ideally, I would ...

Map with a responsive grid layout featuring two columns

My layout is currently set up with static markup that creates a flex design with 2 columns. <Row> <Col span={6}>content</Col> <Col span={6}>content</Col> </Row> <Row> <Col span={6}>content</Col> ...

Changing the name of a file using NPM

Is there a way to change the name of a specific file in npm scripts? I need to modify files for distribution, but they must have different names than the original... I attempted using orn, however it only works on the command line and not as an npm script ...

Steps for setting up authentication in a Hyperledger Angular applicationAre you looking to

I successfully implemented a hyperledger composer blockchain solution across multiple organizations by following the steps outlined in this tutorial. In addition, I utilized the command yo hyperledger-composer:angular to generate an angular2 app with exis ...

Limiting the types of files a user can access through a web browser

Hey there! I have a unique question that sets it apart from others, as it involves restricting file types for users with a browser popup. My goal is to prevent users from selecting certain file types before they choose a file. I've come across some s ...

Unable to render data in Chart JS using PHP JSON

Hello, I’m currently working on creating a dynamic line chart using Chartjs. The data is being pulled from an SQL database using PHP in JSON format. Although the data is successfully retrieved, the chart appears blank. Any assistance would be greatly app ...

I attempted to simulate the mat-dialog in Angular that contains the ngOnInit method, but unfortunately, it is not being successfully tested

In my TypeScript file, I am trying to unit test a component that includes a mat-dialog and a form. So far, the constructor code is covered in the tests, but I'm having trouble calling the rest of the methods. Below is my spec file where I have mocked ...

The onChange() function in the Date Picker event is failing to activate

My issue involves the Angular Material DatePicker. Everything seems to be working smoothly, however, the (change) event does not trigger when I change the date using the calendar. Manually inputting a date works just fine. I would like to display an erro ...

Issue with Ajax submit button failing to pass ID

I am encountering an issue while trying to update data using bootstrap modal. When the CGridView selectionChanged event is triggered, it should call a function to display a modal dialog form and populate the form with the selected data. Below is my CGrid ...

Issue: Unable to retrieve the property "div" as the animated object is not defined

Recently, I decided to enhance my JavaScript skills by following a tutorial on creating a dating site using the react-tinder-card component. However, during implementation, I encountered an error message: Uncaught runtime errors: ERROR can't access pr ...

Is it possible to apply a style change to several components at once using a single toggle switch

I am looking to implement a day/night feature on my web app, triggered by a simple toggle click. While I can easily add this feature to a single component using the navigation menu, I am faced with the challenge of incorporating it into multiple component ...

Tips for transferring a value from a function in ASPX to a CS file

I seem to be overlooking a small detail. I have a dropdown list (DDL) and a function in my C# file. I want to pass the 'value attribute' of a selected DDL option to my function, but I can't seem to retrieve the value attribute. I checked the ...