Pop-up modal when click button in data table row

Question

I'm using angular Next Angular 8 Free Admin Template , I need to show modal when I click button in data table row.

Below you can see the code

Html code

<div class="col-sm-12">
    <app-card cardTitle="Action" cardClass="card-datatable" [options]="false">
      <div class="table-responsive">
        <table datatable [dtOptions]="dtRouterLinkOptions" class="table table-striped table-bordered table-hover"></table>
      </div>
    </app-card>
  </div>

Typescript code

export class TblDatatableComponent implements OnInit {
  dtRouterLinkOptions: any = {};

  constructor() { }

  ngOnInit() {
    this.dtRouterLinkOptions = {
      ajax: 'fake-data/datatable-data.json',
      columns: [{
        title: 'Name',
        data: 'name'
      }, {
        title: 'Position',
        data: 'position'
      }, {
        title: 'Office',
        data: 'office'
      }, {
        title: 'Age',
        data: 'age'
      }, {
        title: 'Start Date',
        data: 'date'
      }, {
        title: 'Salary',
        data: 'salary'
      }, {
        title: 'Action',
        render: function (data: any, type: any, full: any) {
          return '<button class="btn btn-outline-primary btn-sm">View</button>';
        }
      }],
      responsive: true
    };
  }
}

How to popup a modal when I click view button

Answer 1

In short you have to add a class name to your modal calling button, Then add an onclick event in the initComplete function in your ngOnInit function like this:

"initComplete": function() {
    $("#yourdatatable-id").on( "click", ".your_modal_calling_class", function () {
        // enable the modal here
    });
}

Please also check the reference for initComplete, it is described there in detail.

https://datatables.net/reference/option/initComplete