Categories

Friday, March 29, 2024
#919814419350 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

therichpost
the authortherichpost
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 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

2 Comments

  • Hi,

    I had to call the bootstrap model popup, I tried as per your example, model popup is opening but with an error : $(…).modal is not a function
    at HTMLButtonElement. (dispatch-entry.component.ts:103)
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:39680)
    at ZoneDelegate.invokeTask (zone-evergreen.js:390)
    at Zone.runTask (zone-evergreen.js:168)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:465)
    at invokeTask (zone-evergreen.js:1603)
    at HTMLButtonElement.globalZoneAwareCallback (zone-evergreen.js:1629)

    Please helpme on this.

  • Hi,

    I had to call the bootstrap model popup, I tried as per your example, model popup is opening but with an error : $(…).modal is not a function
    at HTMLButtonElement. (dispatch-entry.component.ts:103)
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:39680)
    at ZoneDelegate.invokeTask (zone-evergreen.js:390)
    at Zone.runTask (zone-evergreen.js:168)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:465)
    at invokeTask (zone-evergreen.js:1603)

    Please helpme on this.

Leave a Reply

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