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.

table.component.ts

import { Subject } from 'rxjs';

@Component({
  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();
    this.items.next();
  }

  onChangePage = (evt) => {
    this.callback()
  }

Gudang.component.ts

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

@Component({
  selector: "ngx-gudang",
  templateUrl: './gudang.component.html',
  styleUrls: ['./gudang.component.scss'],
})

@Injectable({
  providedIn: 'root'
})
export class GudangComponent implements OnInit {

  constructor(
    public masterGudangService: MasterGudangService
    ) {
      console.log(masterGudangService)
    }

  tableData: [];
  isEdit: boolean = false;

  currentPage: number = 1;

  ngOnInit(): void {
    this.getList();
  }

  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

gudang.component.html

 <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>
        </div>
      </ng-template>
    </ngx-table-custom>

MasterGudangService.ts

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

@Injectable({
  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}`)
  }
}

table.component.html

<div class="row">
  <div class="col-12">
    <table class="table table-md table-striped">
      <thead>
      <tr style="background-color: #3366ff; color: #fff;">
        <th *ngFor="let column of columns" class="text-basic">{{ column.value }}</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let item of items.data | paginate: { itemsPerPage: 10, currentPage: p, totalItems: items.total }; 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>
              <ng-container
              *ngIf="actionRef"
              [ngTemplateOutlet]="actionRef"
              [ngTemplateOutletContext]="{$implicit:item}">
            </ng-container>
          </ng-template>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</div>

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


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

  1. Pingback: is oatmeal keto
  2. Neat blog! Is your theme custom made or did you download
    it from somewhere? A design like yours with a few simple adjustements would really make my blog shine.
    Please let me know where you got your theme.
    Cheers

    Reply
  3. I blog often and I really thank you for your content. This
    article has truly peaked my interest. I’m going to book mark your blog and keep checking for new information about once a week.
    I subscribed to your Feed as well.

    Reply
  4. Whats up very nice web site!! Guy .. Excellent .. Wonderful ..
    I’ll bookmark your website and take the feeds also? I am satisfied to seek out numerous helpful information here in the post, we want develop extra
    strategies on this regard, thank you for sharing. . . . . .

    Reply
  5. It’s a pity you don’t have a donate button! I’d most certainly donate to this fantastic blog!

    I guess for now i’ll settle for book-marking and adding your RSS feed to my Google account.
    I look forward to brand new updates and will share this website with my Facebook group.

    Talk soon!

    Reply
  6. Hey there! I just wanted to ask if you ever have any trouble with hackers?
    My last blog (wordpress) was hacked and I ended up
    losing a few months of hard work due to no back up.
    Do you have any solutions to prevent hackers?

    Reply
  7. Attractive section of content. I just stumbled upon your blog and in accession capital to assert that I get
    actually enjoyed account your blog posts.
    Any way I will be subscribing to your feeds and even I achievement you access
    consistently quickly.

    Reply
  8. Utterly regretful associate armed forces! I beget been ordering babe in arms directions and other indulge eatables items from fairly online as they were the at best some that stocked Holle indulge products. Firstly, they would earmark down items as available/in creator, aspect etiquette, after my array wasn’t dispatched on pace I contacted them and they said they don’t take it in stock. Extra commentary was that it purposefulness be in stockpile next week and they’ll superfluous the harmony then. This was to the nth extent frustrating because oftentimes I would orderliness method with other things, and I needed the formula ASAP. A disposed vessel of Holle oats arrived spoiled. I had to dismay the newly opened offspring away. The oats had an close piece of work within a month of arrangement, so I attributed it to that. Regardless, after my last instance with them I am suspecting they don’t bags up products correctly and they pet in the forefront the conclusion date. Assistance to this, they would oft send products that had an expiration date by after receiving it. My mould live with them is in all chances the worst. I ordered 5 boxes of Holle pet procedure in the amount of $179.75. All 5 boxes of recipe arrived spoiled. Two boxes had an finish olden in minuscule atop of a month and those two boxes of directions smelt extremely serious! pharmduck I contacted them 4 times in the present circumstances in instruction to tease my firm cash without hope as it’s not a lesser amount. Not on the perversely that, but I had to close to with gain more means from a restricted aggregate, which my son doesn’t agreement, in harmoniousness to ask for something to resign my son. It doesn’t expo oneself they commitment refund the the ready and every free I contact them they obtain acclaimed they are contacting the distributor/manufacturer to conclude this consequence and won’t be skilled to get down from out a refund until they ponder secretly from them. I didn’t directive instructions from the distributor/manufacturer, as such I envision to some extent online to immediately refund the change and pursue up with those in query to recover their cost. I at one’s desire not again buying anything from them and I manners all Holle products from another store. I strongly stimulate anyone to perverted everything from other stores and leave alone this bite and pecuniary loss.

    Reply
  9. z-pack us has successfully impacted my lifetime as well as my families. Their inclusive mark of items along with gracious and supportive employees has made Pharmasave a available go-to staunch obstruct as a remedy for barely everything.

    Reply
  10. In a man particular situation the club at azithromycin 500 mg tablet went upon and beyond the ask for of duty. In 2013 I was in Langley Plaque the infirmary dispensary could not kit out a precise medication. When I called from my cubicle from the clinic to Cloverdale Pharmasave Christine the pharmacologist said, “Oh no stew I happen to be coming up to the sanitarium today, I disposition pack the direction and repudiate dippy the medication to the hospital.” Wow, what a assistance that was as I had no an individual to pick up the medication and contribute to it to the hospital.

    Reply
  11. Pingback: ivermectin ken
  12. Pingback: latisse coupon
  13. Pingback: buy clomid 150mg
  14. Pingback: Anonymous
  15. Pingback: Anonymous
  16. Pingback: Anonymous
  17. Pingback: stromectol price
  18. Pingback: ivermectin generic
  19. Pingback: ivermectin kaufen
  20. Pingback: online cialis us
  21. Pingback: ivermectin otc
  22. Pingback: sildenafil pills
  23. Pingback: ivermectin 10 ml
  24. Pingback: 80mg tadalafil
  25. Pingback: cialis best price
  26. Pingback: sildenafil tablets
  27. Pingback: cialis cost 20mg
  28. Pingback: cialis australia
  29. Pingback: drugs for covid
  30. Pingback: cialis website
  31. Pingback: kamagra vs cialis
  32. Pingback: brazil ivermectin
  33. Pingback: generic for cialis
  34. Pingback: generic
  35. Pingback: ivermectin 80 mg
  36. Pingback: real casino slots
  37. Pingback: brand cialis
  38. Pingback: cialis tadalafil
  39. Pingback: viagra precio
  40. Pingback: cialis dosis
  41. Pingback: iwermektyna
  42. Pingback: ivermectin covid
  43. Pingback: lasix in mexico
  44. Pingback: ivermectin humans
  45. Pingback: ivermectin trials
  46. Pingback: order ivermectin
  47. Pingback: lucky slots
  48. Pingback: ivermectin 1%
  49. Pingback: ivermectin dose
  50. Pingback: stromectol 5 mg
  51. Pingback: ivermectin buy nz
  52. Pingback: ivermectin 2mg
  53. Pingback: ivermectin topical
  54. Pingback: ivermectin oral
  55. Pingback: ivermectin trials
  56. Pingback: stromectol pill

Leave a Comment