Categories

Sunday, September 26, 2021
therichposts@gmail.com
ag-gridAngular 9Jquery

Angular 9 AG-Grid add datepicker to each row

angular 9 ag-grid

Hello to all, welcome again on therichpost.com, today in this post, I will show you, Angular 9 AG-Grid add datepicker to each row.

Post Working:

In this post, I am showing datepicker in each row of ag-grid in Angular 9 with the help of jquery.

Here is the working code and you need to add carefully and if you have any kind of query then please comment below:

1. Very first, you have to run below commands to add Angular 9, AG-Grid and jQuery:

npm install -g @angular/cli

ng new angulardatatables

cd angulardatatables

npm install jquery --save

npm i --save ag-grid-community ag-grid-angular

$ ng serve

//Here is the url, you need to run into your browser and see working angular test project
http://localhost:4200/

 

2. After run above commands, you have to add below code into your app.module.ts file:

import { AgGridModule } from 'ag-grid-angular';

imports: [...

          AgGridModule.withComponents([])
         ...
         ],

 

3. Now you have to run below commands into your angular.json file:

"styles": [
                        ...
        "node_modules/ag-grid-community/dist/styles/ag-grid.css",
        "node_modules/ag-grid-community/dist/styles/ag-theme-balham.css"
        
            ],
            "scripts": [
      "node_modules/jquery/dist/jquery.js",
           
      ...
      ]

 

4. Now add below code into app.component.ts file:

declare let $: any;
columnDefs = [
    {headerName: 'Make', field: 'make' },
    {headerName: 'Model', field: 'model' },
    {headerName: 'Price', field: 'date'}
  ];

  rowData = [
    { make: 'Toyota', model: 'Celica', date: 2020-04-0},
    { make: 'Ford', model: 'Mondeo', date: 2020-04-0},
    { make: 'Porsche', model: 'Boxter', date: 2020-04-0}
  ];
...
ngOnInit(): void {

$("div[col-id='date']").html("<input style='border:none;' type='date'>");
}

 

5. Now you have to add below and final code into app.component.ts file:

<ag-grid-angular 
  style="width: 500px; height: 500px;" 
  class="ag-theme-balham"
  [rowData]="rowData" 
  [columnDefs]="columnDefs">
</ag-grid-angular>

 

6. In the end please run ng serve command and check the output and this is just first part and I my next part, I will make it dynamically.

Jassa

Thank you

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, Angular 8, Angular 9, Angular 10, Angular 11, Angular12, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

2 Comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.