Conceal particular row data in Ag-Grid using Angular

I've successfully integrated Angular Ag-Grid to display a list of data. Is there a way to selectively hide certain row values (cells)?

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

Specifically, I'd like to hide the edit and delete icons on the last row of the grid. The current code I'm using achieves this goal, but it may not be the most efficient or Angular-friendly approach:

setTimeout(()=>{
   hideLastColCells()
},200);

hideLastColCells() {
   let tableRow = document.getElementsByClassName('ag-center-cols-container')[0].children;
   let lastRow = tableRow[tableRow.length - 1].children
   lastRow[lastRow.length-1].classList.add("d-none");
   lastRow[lastRow.length-2].classList.add("d-none");
}

The use of setTimeout impacts user experience negatively and is not in line with Angular best practices.

javascriptangulartypescriptangular-materialag-grid

Answer №1

If you want to hide your cell renderer template, you can wrap it in a 

<div *ngIf="!hidden">...</div>
and implement the following logic:

class CellRenderer implements ICellRendererAngularComp {

  public hidden: boolean;

  // ...

  agInit(params: ICellRendererParams): void {
    // Set `this.hidden = true` to hide the renderer when the row is the last one in the grid
    // Assuming you pass rowData length in the `context` object of the parent grid component
    // e.g. `this.context = { numberOfRows: rowData.length }`
  
    this.hidden = params.rowIndex === params.context.numberOfRows - 1;
  }

  // ...

}

Make sure to provide the length of your rowData in ag-grid's context prop.

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

Why aren't methods for JavaScript objects being identified as expected?

My current project involves creating an avatar that follows the movement of my mouse. After successfully developing a functional avatar, I'm now looking to replicate it using an object constructor. The only difference is that instead of var angleToBe ...

javascriptobjectthree.jsavatar

Inform the user with an HTML element when the form has been successfully submitted in Angular JS

I'm just starting out with Angular JS and I've chosen it as the framework for my client-side JavaScript. My goal is to notify the user when a form is successfully submitted using an HTML element, rather than an alert that requires the user to cli ...

javascriptjqueryhtmlangularjsforms

Can files in a directory be listed using JavaScript without the need for HTML tags?

Currently, I am exploring ways to automate an Angular application using Protractor. During this process, I encountered a situation where I needed to retrieve a list of all the files within a specific folder. In Java, I am aware that we can accomplish this ...

javascriptarraysangularjsfileprotractor

Unable to retrieve information from the API server (with a public IP) using ngResource

This may seem like a naive question, but I am stuck and new to Angular. Despite searching extensively, I have not been able to find a solution. var app=angular.module('myApp',['ngResource']); app.controller('myCtrl',['$s ...

javascriptangularjs

Unable to fetch data in CakePHP 3.x controller using jQuery AJAX POST

I've been searching everywhere and unfortunately, I can't seem to figure out why the data is not being sent to my controller when posting via ajax. Here's the jQuery code snippet: var newDate = {}; newDate['start' ...

javascriptjqueryajaxcakephpcakephp-3.x

Tips for showing only the date (excluding time) from a get operation in javascript (specifically using node js and mysql)

I recently built a CRUD application using Node.js and MySQL. However, I am facing an issue where I am unable to display the date without the time and in the correct format. { "id": 1, "name": "Rick Sanchez", "dob": & ...

javascriptmysqlnode.jsexpress

The data retrieved from MongoDB is not appearing on the webpage

Currently, I am working on a project for a chat app but I'm facing an issue with displaying the data stored in my local mongoDB database onto the webpage. The specific problem arises when attempting to showcase the sender's name, message content ...

javascripthtmlmongodbexpressobject

Specialized typescript function that is compatible with extended interfaces

Is there a way to create a versatile function that can be applied to any interface derived from a top-level interface? This function should take an unpersisted interface (without an id property) and return a persisted one (with an id property). The two ma ...

typescript

Utilizing fluent-ffmpeg in nodejs and express to effortlessly download a video

I've been recently tackling a side project that involves downloading videos from Reddit. The tricky part is that the video and audio are stored in separate files, requiring me to merge them before being able to download them onto the client's dev ...

javascriptnode.jsexpressffmpegvideo-streaming

Show information based on the user's role

I need to adjust my menu so that certain sections are only visible to specific users based on their roles. In my database, I have three roles: user, admin1, and admin2. For instance, how can I ensure that Category 2 is only visible to users with the ROLE_A ...

javascriptangularjs

"Implementing an Angular function to loop through an array and sort

My job involves handling an array of objects, each object containing various properties: comments:"" id:1 inProgress:false jobDescription:null lastUpdateDate:"07/08/2016" lastUpdatedByUser:"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" dat ...

javascriptarraysangularjsloopssorting

Refreshing page with ReactJS internationalization (i18n) capabilities

Currently, I am utilizing react-i18next within my Reactjs application. An issue that I am encountering is that whenever I switch the language, the app reloads and always reverts back to the main route. Is there a method to redirect to the same page or ch ...

javascriptreactjsi18nextreact-i18next

My tests are unable to execute on the test database due to the lack of a defined service

I am currently trying to execute my test file in NestJS. My goal is to connect to a test database and run my service with it. However, I am facing an issue where my service is undefined and the method service.findById is also undefined. How can I obtain an ...

typescriptjestjsnestjs

accordion effect with a bundle of multi-anchor buttons

Working on a website where I need a navbar or anchor button to display content. Having an issue where all expanded items collapse when clicked for the first time, rather than following instructions as outlined in the JavaScript code. Here is the code snip ...

javascriptjqueryhtmlcsstwitter-bootstrap

Navigating the way to capture the browser time using React

Can the browser time be retrieved in a React application? Are there any libraries available that can assist with this task? The webpage needs to display the current time of browsers such as Chrome, Explorer, Firefox, etc. Thanks and regards, Alexander ...

reactjstypescriptweb-deployment-project

Utilizing the polymer paper-dialog component in an Angular 2 TypeScript application

I have imported the paper-dialog from bower, but I am facing an issue with showing the dialog using the open() method. app.component.html <paper-icon-button icon="social:person-outline" data-dialog="dialog" id="sing_in_dialog" (click)="clickHandler()" ...

typescriptangularpolymer

Issue with Chrome extension's popup not displaying

I was developing a chrome extension, but I encountered an issue where the popup does not display when clicking on the icon. After researching online, I found suggestions to change page_action to browser_action. However, even after making this adjustment, ...

javascriptjsongoogle-chrome-extension

Sending an Array from a ReactJS Frontend to a Django Backend using JavaScript and Python

I successfully created a website using Django and React JS. In my project, I am working on passing an array named pict from the frontend JavaScript to the backend Python in Django. let pict = []; pictureEl.addEventListener(`click`, function () { console ...

javascriptpythonreactjsdjango

Click on the dropdown item in the Bootstrap btn-group dropdown

I am interested in clicking the dropdown item within the btn-group and triggering an alert message. This is the HTML code I have: <td> <div class="btn-group" role="group"> <button id="btnGroupVerticalDrop2" type="button" class= ...

javascriptjquerytwitter-bootstrap

Leverage classes from a CommonJS module within a Typescript environment

I am facing an issue with my npm package setup. Here is a snippet from one of the files: 'use strict' module.exports = class TModel { constructor (app) { this.app = app } static schema () { } } I am trying to incorporate this int ...

typescriptnpmcommonjs