Angular

// Web Development //

Call a parent method from child component in Angular

by Dillon - Updated -

In JavaScript frameworks, such as Angular, it’s common for components to communicate with each other and send data back and forth. In this post, I will show you how to call a parent method from a child component using Angular EventEmitters.

In all JavaScript frameworks, it’s common for child components to send information back to a parent components functions.

A child component could need to call a parent component function to ask for updated information from an API, to send input values to the parent upon an event. In Angular, these methods are called EventEmitters.

What is an EventEmitter?

To call a parent component method from a child component, you need to use an Angular EventEmitter. Emitting events allows your components to communicate with one another when a certain action has been executed, in this example the action is on click.

To emit an event, we need to use the @Output decorator on the child component and register a handler for the event by subscribing to the instance on the parent component.

How to call a parent method from a child component

Call a parent method from a child component

Child Component

In your ChildComponent, extend the ParentComponent class. This allows the child to Emitt events to the parent.

Use the @Output() decorator with the name of your event, in this case, I have called the event “alert”. When the button in the template is clicked, the makeAlert() method is called. This method then Emitts the event “alert”, which the parent will be subscribed to.

@Component({
   selector: 'child-component',
   template: `I’m a child component <button (click)="makeAlert()">Click Me</button>`
})

export class ChildComponent extends ParentComponent {
     @Output() alert: EventEmitter<string> = new EventEmitter();
     makeAlert(){
          this.alert.emit();
     }
}

Parent Component

In your parent components template, where the child compone is included, add a handler that is named the same as the event which is being emitted. In this case, we should be listening to the “alert” event. When the event is emitted by the child, the showAlert() method is called. 


@Component({
   selector: 'parent-component',
   template: `
    <p>I’m a parent component</p>
    <child-component (alert)=”showAlert()”></child-component>
  `
})

export class ParentComponent {
     showAlert(){
          alert(“This has been triggered by the child component!”);          
     }
}

Conclusion

You have now successfully called a parent component method from a child component using an EventEmitter in Angular.

Learn more about Decorators in Angular.

Did this help you? If you need any help, leave a comment below!

Dillon Smart

👋 Hey, I'm Dillon!

I'm a Full Stack developer from the U.K. I've been building websites and applications for 11 years! Along the way I've picked up a few things, and share them here on IKnowThatNow.com.

Feel free to reach out on Twitter!

1 Comment

IKnowThatNow

[…] I have created a full post example of the usage of the @Output decorator.  […]

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.