Cannot read property of undefined when calling method as a callback

I’m new to OOP and angular.
currently, I want to use reusable table with pagination that makes a request API if page change (pagination inside table component).

the problem is when I access my method using callback from table component (Child) I got undefined.

but when I try to move pagination to MasterGudang (Parent) Components it’s work.

I don’t really understand what’s going on.
Error undefined
enter image description here

but here some code.


import { Subject } from 'rxjs';

  selector: 'ngx-table-custom',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.scss']
export class TableComponent implements OnInit {

  constructor() { }

  @Input() items: any;
  @Input() callback: any;
  @Input() columns: [];
  p: number = 1;

  @ContentChild('action', { static: false }) actionRef: TemplateRef<any>;
  ngOnInit(): void {
    this.items = new Subject();;

  onChangePage = (evt) => {


import { MasterGudangService } from '../../../../@core/services/master-service/menu-gudang/gudang/masterGudang.service';

  selector: "ngx-gudang",
  templateUrl: './gudang.component.html',
  styleUrls: ['./gudang.component.scss'],

  providedIn: 'root'
export class GudangComponent implements OnInit {

    public masterGudangService: MasterGudangService
    ) {

  tableData: [];
  isEdit: boolean = false;

  currentPage: number = 1;

  ngOnInit(): void {

  getList (page?: number) {
    this.masterGudangService.getPgb(page? page: this.currentPage).subscribe(response => {
      const { data: { content, totalElements, size, number } } = response;
      this.tableData = Object.assign({
        data: content,
        total: totalElements,
        size: size,
        number: number

And here I passing my function which is getList to table component


 <ngx-table-custom [callback]="getList" [columns]="column" [items]="tableData">
      <ng-template let-item #action>
        <div class="row">
          <button nbButton status="success" (click)="open(dialog, item, true)" class="mx-2" size="tiny"><nb-icon icon="edit"></nb-icon></button>
          <button nbButton status="danger" (click)="onDelete(item)" size="tiny"><nb-icon icon="trash"></nb-icon></button>


import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

  providedIn: 'root'
export class MasterGudangService {

  constructor(private http: HttpClient) { }

  getPgb (page: number = 1, perPage: number = 10) :any {
    return this.http.get(`my-api-url/pgb?page=${page}&size=${perPage}`)


<div class="row">
  <div class="col-12">
    <table class="table table-md table-striped">
      <tr style="background-color: #3366ff; color: #fff;">
        <th *ngFor="let column of columns" class="text-basic">{{ column.value }}</th>
      <tr *ngFor="let item of | paginate: { itemsPerPage: 10, currentPage: p, totalItems: }; index as idx;">
        <td *ngFor="let column of columns">
          <div *ngIf="column.key === 'number';"><b class="text-basic">{{ idx + 1 }}</b></div>
          <div *ngIf="column.key !== 'action' && !isNested(column.key);" class="text-basic">{{ item[column.key] }}</div>
          <div *ngIf="isNested(column.key);" class="text-basic">{{ getKeys(item, column.key) }}</div>
          <!-- <div *ngIf="column.key === 'action; action_container"></div> -->
            <ng-template [ngIf]="column.key === 'action'" #action_content>

<div class="row">
  <div class="col-12" align="center">
    <pagination-controls (pageChange)="onChangePage($event)"></pagination-controls>

2 thoughts on “Cannot read property of undefined when calling method as a callback”

Leave a Comment