Monday, November 30, 2020
therichposts@gmail.com
ag-gridAngular 10Bootstrap 4.5JavascriptJquery

Angular 9/10 ag-Grid Open Bootstrap Modal on Row Click

Angular 9 10 ag Grid open bootstrap modal on rowclick

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 9/10 ag-Grid Open Bootstrap Modal on Row Click.

Angular 9 10 ag Grid open bootstrap modal on rowclick
Angular 9 10 ag Grid open bootstrap modal on rowclick

Angular 10 came. If you are new in angular then check my old posts related to angular 10.

Here is code snippet and please follow carefully:

1. Here are the basics commands, you need to use into your terminal or command prompt to install Angular 10  fresh set up:

npm install -g @angular/cli //Setup Angular10 atmosphere

ng new angular10grid //Install New Angular App

/**You need to update your Nodejs also for this verison**/

cd angular10grid //Go inside the Angular 10 Project

 

2. After Install Angular 10  fresh setup and go inside the Angular 10 setup, run below command into your terminal to install ag-grid module and Bootstrap:

I use bootstrap for good looks

npm install --save ag-grid-community ag-grid-angular
npm install jquery --save
npm install bootstrap --save

 

 

3. After done with commands add below code into you angular.json file:

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

]
...

 

 

4. Add below code inside your app.module.ts file:

...
import { AgGridModule } from 'ag-grid-angular';
...
imports: [
...
AgGridModule.withComponents([]),
]

 

5. Add below code inside your app.component.ts file:

...
declare let $: any;
export class AppComponent{
...
columnDefs = [
        {headerName: 'Make', field: 'make', sortable: true, filter: true },
        {headerName: 'Model', field: 'model', sortable: true, filter: true },
        {headerName: 'Price', field: 'price', sortable: true, filter: true}
    ];

    rowData = [
        { make: 'Toyota', model: 'Celica', price: 35000 },
        { make: 'Ford', model: 'Mondeo', price: 32000 },
        { make: 'Porsche', model: 'Boxter', price: 72000 }
    ];
onRowClicked(event: any) {$("#imagemodal").modal("show");}
}

 

 

6. Finally add below code inside your app.component.html file:

<div class="container mt-5 mb-5">
<ag-grid-angular
    style="width: 620px; height: 300px;" 
  class="ag-theme-balham-dark"
    [rowData]="rowData"
    [columnDefs]="columnDefs"
  (rowClicked)='onRowClicked($event)'
    >
</ag-grid-angular>
</div>

<div class="modal" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <h4 class="modal-title" id="myModalLabel">Ag-Grid Row Click</h4>
    </div>
    <div class="modal-body">
  <p>Ag-Grid Row Clicked!!</p>
        
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-dark" data-dismiss="modal" (click) = "hide()">Close</button>
    
    </div>
  </div>
</div>
</div>

 

 

This is it and please run ng serve command in the end. if you have any kind of query then please do comment below.

Jassa

Thanks

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, Nodejs, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

Leave a Reply

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