How to call a method in a child component from a parent component?

Question

Okay the title may be a little confusing. My child component is in its own module and is using services that aren't available to the parent component.

I want to change some values in the child component on click of a button and was messing around and set something up like this.

@Component({
 selector: 'app-parent-component'
 template: `
 <button (click)="refreshData()" />
 <app-child-component> </app-child-component>
`
})
export class ParentComponent{
 refreshData() {
   ChildComponent.runRefresh()
 }
}

@Component({
 selector: 'app-child-component'
 template: ``
})
export class ChildComponent{
 static runRefresh() {
   console.log('refreshing')
   // Do things involving data on a service scoped to this component/module
 }
}

I was curious if there was something inherently wrong with this approach? Are there better ways to solve the problem. Im familiar with checking for the changes in NgOnChanges event.

I guess what i'm trying to do is call a method inside of the child component, that uses the child component resources on a scoped service, from a parent component.

Edit: Also aware of using @ViewChild and not making the child components method static. Maybe that is the only "right" way?

Only one I can think of is if you have multiple instances of the component, which of the components are you going to refresh? I think I would rather go for the component having its own way of triggering a refresh through a @Input setter or some other way. — Inge Olaisen
– Inge Olaisen, Commented Mar 2, 2020 at 19:19
@IngeOlaisen refreshing is more of a refresh of the data and make a call to the api. Not actually refreshing anything in the browser. I know I can use an ViewChild and put a reference on the <app-child-component #childReference >. Just looking for new ways — Petey
– Petey, Commented Mar 2, 2020 at 19:23
@ConnorsFan It was just static because I was experimenting. I like your solution though. Thanks! — Petey
– Petey, Commented Mar 2, 2020 at 20:14
Does this answer your question? Call child component method from parent class - Angular — Leonel Thiesen
– Leonel Thiesen, Commented Nov 23, 2022 at 17:31

Martin Parenteau · Accepted Answer · 2020-03-02 19:57:26Z

5

If runRefresh is a public method of the child component:

export class ChildComponent{
  public runRefresh() {
    ...
  }
}

you can call it directly in the parent template by referring to the child component with the help of a template reference variable:

<button (click)="child.runRefresh()" />
<app-child-component #child></app-child-component>

See this stackblitz for a demo.

edited Mar 2, 2020 at 19:57

answered Mar 2, 2020 at 19:29

Martin Parenteau

74k13 gold badges137 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

enno.void · Accepted Answer · 2020-03-02 19:32:33Z

0

The easiest way is to write a service that provide an event, emit in parent, subscribe in the childs.

Another way:

You can write a directive that provides a component reference:

import { Directive, TemplateRef } from '@angular/core';

@Directive({
  selector: '[selectordirective]',
})
export class SelectorDirective  {
  constructor(public cmpRef: ChildComponent) { }
}

Attach it to your childs:

<app-child-component selectordirective> </app-child-component>

Use ViewChild to read the reference in ParentComponent:

@ViewChild(SelectorDirective) child !: SelectorDirective;

  ngAfterViewInit() {
    child.cmpRef.runRefresh()
  }

answered Mar 2, 2020 at 19:32

enno.void

6,6284 gold badges28 silver badges45 bronze badges

1 Comment

Wilhelmina Lohan Over a year ago

Why not just a ViewChild of ChildComponent?

Collectives™ on Stack Overflow

How to call a method in a child component from a parent component?

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related