Not able to access method from parent to child in angular 6

Question

I am not able to fetch another method of parent which is called in method of parent that i am using as input and calling in child component.

export class TreeMapComponent {

  data;

  constructor(public dialog: MatDialog, private router: Router) { }

  ngOnInit() {

    let results=[1,2,3]

  }
  fetchChildrenForPage(page, pagePerPage) {
    let results={soemthing: 898, children: [1,2,3,3,4,5,6,7,8,8,8,5,3,3,4]}
    this.data = { ...results, children: results.children.slice(1, 5) };
    this.createTest(this.data);
  }


  createTest(clusterInfo): void{
      console.log(clusterInfo)
   }
}

TreeMapComponent.html (html that i am using for above component, rough idea)

<app-sub-custom-pagination[fetchChildrenForPage]="fetchChildrenForPage">
  </app-sub-custom-pagination>

Now i will mention the child component app-sub-custom-pagination

export class SubCustomPaginationComponent implements OnInit {


  @Input()
  fetchChildrenForPage;
  currentPage;

constructor() { }

ngOnInit() {
   selectPage(0);
}

selectPage(index): void {
    this.currentPage = (index + 1);
    this.fetchChildrenForPage(this.currentPage, this.quantityPerPage);
  }

But unfortunately i am getting an error:

ERROR TypeError: this.createTest is not a function
.
.
.

Or you can use @output directive, in subCustomPagination.ts than you can get that event in treeComponent.html using this sysntax.. (fromSubComponet)= "fetchChildrenForPage" — Developer, Oct 29 '19 at 06:13
I can't do that. This is miniaturized form of that method. this.createTest contains another set of 5 6 methods that are part of that parent class. Which is why i need more subtle solution. — TrickOrTreat, Oct 29 '19 at 06:17
I agree with GaurangDhorda. If the children data is going to be used at TreeMapComponent, then you should go for the @Output directive. A similar topic was discussed here https://stackoverflow.com/questions/35328652/angular-pass-callback-function-to-child-component-as-input-similar-to-angularjs — DriLLFreAK100, Oct 29 '19 at 06:17
Is'nt that @Output is for child to parent communication? I have to get this work, I cannot directly call that createTest. Otherwise now solution for me is to use this component directly as html into parent component, which i am trying not to do. — TrickOrTreat, Oct 29 '19 at 06:24

score 1 · Accepted Answer · answered Oct 29 '19 at 06:37

When you call a parent method from child component the this context inside ferchChilderForPage will be refer to child component

Example

fetchChildrenForPage(page, pagePerPage){
    console.log(page, pagePerPage, this); //this will refer to child component When you call from child
   //  this.createTest('ClusterInfo');
  }

Try this

Pass parent instance to child component then call the parent method from child component

parent.component.html

<app-demo [appInstance]="this"></app-demo>

parent.component.html

export class DemoComponent implements OnInit {
  @Input() appInstance;
  constructor() { }

  ngOnInit() {
  }

  onClick(){

    this.appInstance.fetchChildrenForPage('demo','demo2');
  }

}

Or

Use ViewChid to access parent component instance from child

Example

score 0 · Answer 2 · answered Oct 29 '19 at 06:14

0

you are calling fetchChildrenForPage function in SubCustomPaginationComponent which it does not have createTest function that makes sense to me. Try to remove createTest Function and just use console.log or define CreateTest Function in SubCustomPaginationComponent

answered Oct 29 '19 at 06:14

Tawfiek Khalaf

497
4
18

I didnt get it. What exactly is not making sense? I am sending `fetchChildrenForPage` to child component, later which child component runs `fetchChildrenForPage`. Bt `fetchChildrenForPage` contains another method that is part of same `parent function` – TrickOrTreat Oct 29 '19 at 06:19
`fetchChildrenForPage` Contains function that is referenced to `this` and `this` here in this situation refers to `SubCustomPaginationComponent`, not to its parent. and `SubCustomPaginationComponent` does not have this method. – Tawfiek Khalaf Oct 29 '19 at 06:24
ohh got it. Perfectly makes sense. I don't know how else to pull this. Real this.chartTest() method contains lots of method from parent component itself. – TrickOrTreat Oct 29 '19 at 06:26

Not able to access method from parent to child in angular 6

2 Answers2