Angular Footable integration

[GG]

Hi ,

I am new to Angular I need urgent help.

I have integrated footable into our application through AJAX. api would return data in JSON format as I wanted a click button i used footable formatter function

  'formatter': function (value) {

         return '<button class="btn btn-primary" id="comments" type="button" (click)="showComments()">Comments</button>'

}

problem is click functionality do not trigger. so I used

$(".table").on("click", "#comments", function(e){

   e.preventDefault();

   var row = FooTable.getRow(this)

   console.log(row.value.id);

   var value = row.value.id;

    const btns: PopUpButton[] = [{

          label: 'Okay',

          callback: () => { this.router.navigate(['/reports']); }

      }];

      

      const commentsData: CommentsData =

          new CommentsData(value,

              btns);

      this.commentsPopupService.showDialog(commentsData);  

  });

}

but the above code click would work and result in the below error

ERROR TypeError: Cannot read property 'showDialog' of undefined

Below is the comments.popup.service.ts

import { Injectable } from '@angular/core';

import { CommentsData } from './commentsData';

import { BehaviorSubject } from 'rxjs';

@Injectable({

  providedIn: 'root'

})

export class CommentsPopupService {

dialogsData: BehaviorSubject<CommentsData> = new BehaviorSubject<CommentsData>(new CommentsData());

  constructor() {

    // this.dialogsData = new PopUpData();

   }

showDialog(data:CommentsData) {

    data.showDialogsBox = true;

    this.dialogsData.next(data);

}

hideDialog() {

  this.dialogsData.next(new CommentsData());

}

}

pls help me to resolve the issue.

[Nitin Gupta]

Hi,

The reference to the commentsPopupService is undefined that's why it is throwing this error. The service needs to be injected into the component as follows

import { CommentsPopupService } from '<CommentsPopupService file name>';

constructor(private commentsPopupService: CommentsPopupService ) {}

Thanks,

Nitin