Angular DataTables.net Custom Buttons

Question

I need to help how to open Modal Windows using DataTables.net Buttons created a button in components file.

I have an error:

ERROR TypeError: this.openModal is not a function
at u.action (czas-pracy.component.ts:64)

every time. I've a problem with how to call "openmodal()" function.

import { Component, OnInit, TemplateRef } from '@angular/core';
import { FadeInTop } from "../shared/animations/fade-in-top.decorator";
import { Http, Response } from '@angular/http';

import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';

import { Observable } from "rxjs/Rx";


@FadeInTop()
@Component({
  selector: 'sa-czas-pracy',
  templateUrl: './czas-pracy.component.html',
  styleUrls: ['./czas-pracy.component.css']
})
export class CzasPracyComponent implements OnInit {
  
  public REST_ROOT = 'http://localhost:3000/pracownicy/pracownicy';
  
  options = {
    dom: "Bfrtip",
    ajax: (data, callback, settings) => {
      this.http.get(this.REST_ROOT)
        .map(this.extractData)
        .catch(this.handleError)
        .subscribe((data) => {
          console.log('data from rest endpoint', data);
          callback({
            aaData: data.slice(0, 100)
          })
        })
    },
    columns: [
      { data: "Imie" },
      { data: "Nazwisko" },
      { data: "Brygada" },
      { data: "Stawka" },
      { data: "Aktywny" },
    ],
    buttons: [
      { text: 'Add',
        action: function ( ) {
          this.openModal()
        }
      }    
    ],
  };
  modalRef: BsModalRef;
  constructor(
      private http:Http, 
      private modalService: BsModalService,
  ) { }
  ngOnInit(){}

  openModal(template: TemplateRef<any>) {
    console.log(template);
    this.modalRef = this.modalService.show(template);
  }
  
  private extractData(res: Response) {
    let body = res.json();
    if (body) {
      return body.data || body
    } else {
      return {}
    }
  }

  private handleError(error: any) {
    // In a real world app, we might use a remote logging infrastructure
    // We'd also dig deeper into the error to get a better message
    let errMsg = (error.message) ? error.message :
      error.status ? `${error.status} - ${error.statusText}` : 'Server error';
    console.error(errMsg); // log to console instead
    return Observable.throw(errMsg);
  }

}

But i think that next problem will be how to call a current modal from html file.

   <ng-template #template1>
     <div class="modal-header">
       <h4 class="modal-title pull-left">Modal</h4>
       <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
         <span aria-hidden="true">&times;</span>
       </button>
     </div>
     <div class="modal-body">
       This is a modal.
     </div>
   </ng-template>

If I use button in HTML:

<button type="button" class="btn btn-primary
(click)="openModal(template1)">Create template modal</button>

it works. But that's no way

I searched and tried a lot of ways, but nothing work.

Any Work Around would be helpful Thanks.

Answer 1

Component context(this) has lost when you used function () { ... }.

Use Arrow Function instead to keep hold of context(this) of Component

action: () => {
  this.openModal()
}