Friday, July 19, 2024
Angular 8Angular 9Bootstrap 4

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

angular smart table open modal

Hello to all, welcome to 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:

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": [
"scripts": ["node_modules/jquery/dist/jquery.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>

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

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



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) {
data = [
    id: 1,
    name: "test Graham",
    username: "Bret",
    email: ""
    id: 2,
    name: "test Howell",
    username: "test",
    email: ""
    id: 11,
    name: "testDuBuque",
    username: "test.Stanton",
    email: ""


If you have any kind of query then please comment below.



the authortherichpost
Hello to all. Welcome to 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.

Leave a Reply

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