I am encountering an issue when trying to call a function on a child component. Whenever I try to invoke it by clicking, I always receive an error indicating that the function is undefined.
Here is the code in my Parent component:
import {MatTableComponent} from './mat-table/mat-table.component'
@ViewChild('matGrid') matGrid: MatTableComponent;
onReload(){
console.log('User clicked Reload');
this.matGrid.onReload()
}
In my child component, I have a simple method:
onReload() {
console.log('User Requested Hit the component')
}
Upon clicking, the following error occurs:
main.js:1 ERROR TypeError: Cannot read properties of undefined (reading 'onReload') at t.onReload (main.js:1) at main.js:1 at aA (main.js:1) at d (main.js:1) at HTMLButtonElement. (main.js:1) at Q.invokeTask (polyfills.js:1) at Object.onInvokeTask (main.js:1) at Q.invokeTask (polyfills.js:1) at Q.runTask (polyfills.js:1) at Q.invokeTask [as invoke] (polyfills.js:1)
What am I missing in order to resolve this issue and make it work correctly?