Unable to attach 'gridOptions' as it is not a recognized attribute of 'ag-grid-angular' component (Angular4)

I am facing an issue with my HTML code and Angular components:

<ag-grid-angular [gridOptions]="gridOptions"></ag-grid-angular>

My component code is as follows:

import {GridOptions} from 'ag-grid'; 
...

export class SampleComponent{
   gridOptions: GridOptions;
}
...

In my app.module.ts file, I have the following setup:

import {NgModule} from "@angular/core";
import {AgGridModule} from "ag-grid-angular/main";
import {AppComponent} from "./app.component";
...

@NgModule({
    declarations: [...],
    imports: [
        ...
        AgGridModule.withComponents([])
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {
}

I am receiving an error message that says:

Error: Uncaught (in promise): Error: Template parse errors: Can't bind to 'gridOptions' since it isn't a known property of 'ag-grid-angular'.

  1. If 'ag-grid-angular' is an Angular component and it has 'gridOptions' input, then verify that it is part of this module.
  2. If 'ag-grid-angular' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
angulartypescriptag-grid

Answer №1

Make sure to define the gridOptions like this in your code

constructor() {
    this.gridOptions = <GridOptions>{};
    this.columnDefinitions = [

    ];

    this.gridOptions = {
      columnDefs: this.columnDefinitions,
      enableFilter: true,
      enableSorting: true,
      pagination: true
    };

    this.rowSelection = 'single';
  }

UPDATE

The issue lies here, Update

Change 

<ag-grid-angular [gridOptions]="gridOptions"></ag-grig-angular>

To

<ag-grid-angular [gridOptions]="gridOptions"></ag-grid-angular>

Answer №2

If you do not want to use gridOptions, you can still create a grid in your own way. Here is an example of how you can achieve this:

<ag-grid-angular style="width: 500px;height: 200px;" class="ag-theme-balham" [animateRows]="true" [columnDefs]="columnDefs" [enableSorting]="true" [enableFilter]="true" (gridReady)="OnGridReady($event)">

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

Testing the combination of Angular units with combineLatest

Recently, I delved into unit testing using the Jest Framework in Angular. However, I've encountered a roadblock while trying to write unit tests for the combineLatest RxJS operator. Check out my component below: Component: public userData; public pro ...

angularunit-testingrxjsjestjscombinelatest

When an item in the accordion is clicked, the modal's left side scroll bar automatically scrolls to the top. Is there a solution to prevent this behavior and

When I first load the page and click on the Sales accordion, then proceed to click on Total reported and forecasted sales, the scrollbar jumps back up to the top The marked ng-container is specifically for the UI of Total reported and forecasted sales He ...

javascripthtmlcssangularangular-material

"Exploring ways to effectively listen for actions in components or subscribe to state with ngrx

I have an object in the state that I initially set using an action and effect: { field1: 'value1', field2: 'value2', } Later on, I add a new field to this object after receiving a response from the server through effects. As a res ...

angularreduxngrx

What is the best way to send headers to the ngx-logger's post method for a server URL?

We are currently considering the use of ngx-logger in Angular 4 for server logging. However, we have encountered an issue with passing headers along with the serverLoggingUrl. BrowserModule, HttpModule, LoggerModule.forRoot( { serverLoggingUrl: &ap ...

angularlogging

The error message "Property 'originalUrl' is not found in type 'Request<ParamsDictionary, any, any, ParsedQs, Record<string, any>>'" appeared

In my TypeScript project, I am utilizing a gulpfile to initiate the process. Within the gulpfile, I am using express where I encounter an issue while trying to access req.originalUrl, with req being the request object. An error is thrown stating Property ...

node.jstypescriptexpress

Angular Validation for Start and End Dates

<tr> <td class="p-10"> <mat-form-field> <input matInput [matDatepicker]="picker" placeholder="Tarih" name="date" id="date" #date="ngModel" ngModel required> <mat-datepicker-toggle matSuffix [for]="p ...

angularangular-material2

Angular Unit testing error: Unable to find a matching route for URL segment 'home/advisor'

Currently, I am working on unit testing within my Angular 4.0.0 application. In one of the methods in my component, I am manually routing using the following code: method(){ .... this.navigateTo('/home/advisor'); .... } The navigateTo funct ...

javascriptangulartypescriptjasmine

Iterate through the Ionic3/Angular4 object using a loop

I've been attempting to cycle through some content. While I tried a few solutions from StackOverflow, none seem to be effective in my case. Here is the JSON data I am working with: { "-KmdNgomUUnfV8fkzne_":{ "name":"Abastecimento" }, ...

jsonangular

Can you explain the distinction between using src/**/* and 'src/**/*'?

Starting my project with nodemon is my goal. "scripts": { "start": "tsc && node build/index.js", "watch-server1": "nodemon --watch src/**/* -e ts,tsx --exec ts-node ./src/index.ts", "watc ...

node.jstypescriptnodemon

The sorting feature is not performing as anticipated

I'm dealing with an array of objects fetched from the backend. When mapping and sorting the data in ascending and descending order upon clicking a button, I encountered some issues with the onSort function. The problem lies in the handling of uppercas ...

javascripttypescript

TypeScript - the object may potentially be 'null'

Despite receiving an error message, the program is running perfectly. https://i.sstatic.net/4NQyR.jpg var video = document.querySelector('#camera-stream'), if(!navigator.getMedia){ displayErrorMessage("Your browser doesn't have su ...

angulartypescript

Using variables to replace 'placeholders' in Typescript with string interpolation

Seeking a definitive answer on this matter, I pose the question: In C#, an example of which would be as follows: var text = "blah blah"; var strTest = String.Format("This is a {0}", text); //output: 'This is a blah blah' How can I accomplish t ...

angulartypescriptstring-interpolation

Using Promise.all for multiple function calls

I have several functions set up like this: private async p1(): Promise<Result> { let p1; // Do some operations. return p1; } private async p5(): Promise<void> { // Make a call to an external API. } Some of these functions c ...

typescriptpromise

Coverage of code in Angular2 using Qunit

Is there a reliable code coverage measurement tool or framework that can easily be integrated to assess the code coverage of Angular2-TypeScript code with QUnit tests? I have come across some frameworks like remap-istanbul, blanket.js etc., but these fram ...

typescriptangularqunitremap-istanbul

Express: Every declaration of 'user' must have the same modifiers

In my application, I am utilizing both express and passport. Within these packages, there is a user attribute within the Request interface. Currently, the express package has a user attribute in the request object, such as req.user, but no additional prope ...

javascriptnode.jstypescriptexpress

When integrating external HTML into an Angular 2 component, relative references may become invalid and fail to

My server hosts basic HTML content that includes an image with a relative file location. While this displays correctly in a browser, loading the content using Angular causes issues with resolving the relative path locally. I have tried following suggestio ...

htmlangulartypescript

Leveraging Angular and HTML to efficiently transfer the selected dropdown value to a TypeScript method upon the user's button click

I am experiencing difficulty accessing the .value and .id properties in {{selectItem}} in order to send them back to the typescript for an HTTP post at a later time. Although there are no specific errors, I have encountered exceptions and have tried search ...

htmlangulartypescriptcollectionsdata-binding

Using the novalidate attribute in Angular 4.0.0

Since migrating to angular 4, I have encountered a peculiar issue with my template-driven form. The required attribute on the input field appears to be malfunctioning. It seems like the form has the novalidate attribute by default, preventing HTML5 validat ...

javascripthtmlformsangular

How to add unique elements to an array in Angular without any duplicates

I need help with pushing elements into an array and decrementing the count of it without duplicates in angular. Any assistance would be greatly appreciated ...

angulartypescript

The attribute 'id' cannot be found in the class 'Foods'

After examining my code below, I am attempting to remove clients from my data table by using checkboxes. Whenever I check a checkbox, I notice in the console that the object's properties are retrieved from the database. My goal is to delete by id, but ...

phpangularjsangular