Tips for implementing a Type hint for cellRendererParams in ag-grid angular

When working with ag-grid, I often find myself creating multiple CellRenderers. One recurring issue is having to remember the parameters and types required by each specific CellRenderer. Is there a way to leverage TypeScript's capabilities to provide type hints for cellRendererParams? This would greatly enhance the coding experience.

For those unfamiliar, ag-grid cellRenderParams are structured as key-value pairs like this:

{
  field: 'colour',
  cellRenderer: ColourRenderer,
  cellRendererParams: {
    colourName: 'yellow',
    opacity: 0.9
  }
}

I wish my editor could offer hints indicating that ColourRenderer requires two parameters - colourName and opacity, with types string and number respectively. Thank you!

Note: I am using the most recent version of ag-grid with Angular 9.

angulartypescriptag-grid

Answer №1

Although I may not have a direct answer to your question, I can provide you with a viable alternative that has proven to be effective for me.

It is evident that Ag-Grid's API was not developed with types in mind, and even its Angular wrapper lacks robustness, making it quite challenging to use in a type-safe manner.

After spending considerable time working with Ag-Grid, I made the decision to create my own wrapper from scratch. One key component of this wrapper is a ColumnDefinition class that implements Ag-Grid's ColDef interface. Within this class, I incorporated 'builder' methods that allow for the addition of features to the ColumnDefinition instance.

This approach enables me to utilize methods with typed parameters for constructing elements like cell renders, rather than relying solely on literals.

For instance, if I wanted to include support for a ColourRenderer in my ColumnDefinition class, I would define a method with the signature:

public withColourRenderer(colourName: string, opacity: number): ColumnDefinition

By using such methods after creating a ColumnDefinition through other means, I can easily add the desired renderer and benefit from type hints.

To illustrate, the process of building a single column could resemble the following example:

ColumnDefinition.stringColumnForField('colour', 'Colour')
   .sortable()
   .filterable()
   .withEditor()
   .withColourRenderer(colourName: 'yellow', opacity: 0.9);

Answer №2

Not the best solution, but it gets the job done:

cellRendererParams: { hideTime: true } as IMaGridCellRenderDateProps }

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

Issue : An error with code NG0204 has been encountered after upgrading Angular from version 15 to 16, but no

Recently, I tackled the challenge of upgrading from Angular version 15 to 16. However, upon completion of the upgrade process, my application started throwing an NG0204 error in the console when served. Unfortunately, no further information is provided bey ...

javascriptangularangular15angular16angular-upgrade

Resetting the datetime-local input to its initial value (ngModel) in template forms

In my Angular 6 template form, the user can modify the date/time in the datetime-local input after loading it with the latest data. However, I am struggling to reset the input back to the original date/time (loaded from array "one.classTimesLogOffRevised") ...

angular

Creating and managing global context with useReducer in TypeScript and React

One issue that I am facing is with the route containing a login and logout button, where the browser error states 'Property 'dispatch' does not exist on type '{}'. (home.tsx) import React, { useContext, useEffect, useRef, use ...

reactjstypescript

Encountering an issue while defining a parameter in an Angular component: expecting either a property

Encountering an issue when attempting to set a parameter involving numbers first, as required by openweathermap's API. Specifically, the data retrieval for rain is labeled as '3h', thus requiring me to input 'data.rain.3h'. However ...

javascriptangulartypescript

Setting up a new package through JPSM installation

I utilize jspm in my web application. My goal is to install the npm:angular2 package without needing to set it up in the config.js file. Instead of loading the angular2 module via jspm, I manually added the angular2 library like this: <script src="jspm ...

javascriptangularjspm

Angular allows you to set specific conditions for when a failed HTTP request should be retried, and you can also specify the number of attempts that should be

Within my angular application, I have a post request that needs to be retried based on the error message, but with a limit on the number of attempts. Initially, I attempted the following approach: public post(url, data) { this._http.post(url, data).pi ...

javascriptangulartypescriptrxjs

Exploring the Validation of Request Body Attributes in Loopback 4

I am searching for a solution to prevent undesired attributes from being included in the requestBody, based on the specifications outlined in the corresponding Model. Below is my model: import { Model, model, property } from '@loopback/repository&ap ...

node.jstypescriptloopbackjs

Instructions on how to sign up for a worldwide technique that is known as

I have a file called globalvars.ts where I added a global method. How can I subscribe to this method in the ts page where it is being called? globalvars.ts; httpgetmethod(url:string) { var veri; var headers = new Headers(); headers.append(' ...

angulartypescriptionic-frameworkionic2

Node.js built-ins require shims, while global variable names are absent

After updating my project using npm-check-updates, I encountered a strange error that stumped me. Despite following the suggested terminal command to install polyfill-node, the issue persisted with no resolution in sight online. The error displayed on the ...

node.jstypescriptnpmsvelterollupjs

What should the expected response be from Angular service observables in cases where an object cannot be found?

I recently encountered a perplexing architectural dilemma involving the utilization of rxjs and observables when engaging with a data service in Angular. Consider the following scenario: displayDetails(id: String): void { this._dataService.getById(id). ...

angularangular-services

Breaking up and Substituting text within Angular 8's HTML structure

When I retrieve data from a REST api, I need to split the name parameter at '2330' and insert a line break. For example, if the name is: ABCD 2330 This is My Name, I want the output on my screen to appear as: ABCD 2330 This is My Name // this par ...

htmlangulartypescriptangular8

Is it possible to escape the code within the setup block using the Vue-Composition API?

<script setup lang="ts"> import router from '@/router'; import { useMainStore } from '@/stores/main'; import { ref } from 'vue'; const mainStore = useMainStore(); const x = ref<object| undefined>(); if ...

typescriptvue.jsvue-composition-api

Leverage Angular2 components within Angular4 framework

Would it be possible to utilize angular2 components in angular4 projects? Specifically, I am interested in using a chart generation library from . However, it seems that the dependencies of this library are not compatible with my application. Are angular2 ...

angularchartsnpm

Tips on integrating Ionic 2 with Angular 2 services

I'm a beginner with Ionic 2. I came across information in the Angular 2 documentation stating that services need to be injected during application bootstrapping. However, I didn't see any mention of bootstrapping while following the Ionic 2 tuto ...

angulartypescriptionic-frameworkionic2ionic3

Issue: Oops! The digital envelope routines are not supported in Angular while attempting to run the project

I encountered an error when running the command below: ng s The error message is as follows: Error: error:0308010C:digital envelope routines::unsupportedat new Hash (node:internal/crypto/hash:68:19)at Object.createHash (node:crypto:138:10)at BulkUpdateDe ...

node.jsangulartypescriptnpm

Display Picture Based on Identifier from LocalStorage in Angular 4

Is it possible to use the user's ID from local storage to determine which image should be displayed? In my AngularJS app, I have a list of images stored in the assets/ folder. How can I retrieve the current user's ID and use that as a reference f ...

angularlocal-storageangular-services

Sparks of brilliance illuminate the syntax of Typescript

I've been experimenting with using Spark in conjunction with TypeScript, and I've run into an issue. When I include multiple lines of code like this: Spark.get("/facture", (req, res) => { chalk.red('Hello test'); chalk.gree ...

typescriptchalk

Enhancing Test Components with Providers in "React Testing Library": A Step-by-Step Guide

I am currently working with React-Testing-Library and have set up my main.tsx file with Redux-Toolkit and React-Router wrappers like this: ReactDOM.createRoot(document.getElementById("root")!).render( <React.StrictMode> <Provider s ...

reactjstypescriptreact-routerreact-testing-libraryredux-toolkit

Is there a method in AngularJS to compel TypeScript to generate functions instead of variables with IIFE during the compilation process with gulp-uglify?

My AngularJS controller looks like this: ArticleController.prototype = Object.create(BaseController.prototype); /* @ngInject */ function ArticleController (CommunicationService){ //Some code unrelated to the issue } I minified it using gulp: retur ...

javascriptangularjstypescriptprototypeminify

Error Message: "Unknown Element Encountered: Lazy Loading Angular / Ionic 3 Component AOT"

Having some trouble with Lazy loading my Ionic components. Everything works fine in development, but when I try to compile AOT throws an error. Spent hours trying different solutions and still stuck on the same error. I've checked examples and everyt ...

javascriptangulartypescriptionic-frameworkionic3