Angular 9 - Angular Smart Table Open Bootstrap 4 Modal Popup on button click

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 9 – Angular Smart Table Open Bootstrap 4 Modal Popup on button click.

If you want to understand this post, then you have to read my last two posts and here are the links:

Angular 9 – Angular Smart Table

Angular 9 – Angular Smart Table Create Custom Button

After understands the above two posts, here is the complete code snippet for open bootstrap modal popup on custom button click in Angular Smart Table:

1. After done with above, you need to run below commands to set bootstrap environment into your angular 9 application:

npm install --save bootstrap

npm install jquery --save

npm install --save @types/jquery

npm install popper.js --save

2. Now you need to add below code into your angular.json file:

...
"styles": [
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
          ],
"scripts": ["node_modules/jquery/dist/jquery.min.js", 
              "node_modules/popper.js/dist/umd/popper.min.js", 
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
           ]
...

3. Now you need to add below code into your app.component.html file:

In this file, I have bootstrap 4 modal popup html

<ng2-smart-table [settings]="settings" [source]="data" custom)="onCustomAction($event)"></ng2-smart-table>

 <!-- The Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        Modal body..
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>

4. Here is the code you need to add into your app.component.ts file:

Here, you will find the click function ‘onCustomAction’ and with that click function modal popup will open.

declare let $: any;
...
settings = {
  columns: {
    id: {
      title: 'ID'
    },
    name: {
      title: 'Full Name'
    },
    username: {
      title: 'User Name'
    },
    email: {
      title: 'Email'
    }
  },
  actions: {
  
  custom: [{ name: 'ourCustomAction', title: "View&nbsp;" }]
 
}
};
onCustomAction(event) {
 $("#myModal").modal("show");
}
data = [
  {
    id: 1,
    name: "test Graham",
    username: "Bret",
    email: "test@april.com"
  },
  {
    id: 2,
    name: "test Howell",
    username: "test",
    email: "test@gmail.tv"
  },
  {
    id: 11,
    name: "testDuBuque",
    username: "test.Stanton",
    email: "test@test.biz"
  }
];
...