Angular: Call a Parent method in Child Component using @Output

By Dillon Smart · · · 1 Comments

Angular

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 in Angular with the @Output decorator using EventEmitters.

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

Usecase for calling a Parent method from a Child Component

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 this example child component, we will call a parent component method which displays an alert when a button on the child component is clicked.

To get started, create a Child Component called “ChildComponent”.

The Child Component will need to extend the Parent Component “ParentComponent” class. This will allow the child to Emitt events to the Parent Component.

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 of the Child Component is clicked, the makeAlert() method is called.

This method then Emitts the event “alert”, to which the Parent Component 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 component is included, add a handler that is named the same as the event which is being emitted by the Child Component.

In this case, we should be listening to the “alert” event.

When the event is emitted by the Child Component, 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!

AngularJavaScriptTypeScript

1 Comment

IKnowThatNow

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

Was this helpful? Leave a comment!

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

Vue 3 Popup Modal Component – Create a Modal

Updated 23rd August 2022

In this post, I’m going to show you how to create a Popup Modal Component in Vue 3. This Popup Modal will use the built-in transition component. The Modal we will create looks a lot like the Modal Dialogs used by Apple in iOS. We will use Tailwind CSS for styling. What is Vue?  Vue

What is a front-end application?

Updated 16th August 2022

What is a front-end application? If you’re new to Web Development, there may be many terms you hear that you’re unsure what they mean. Don’t worry, this is all part of the learning experience and you will pick these terms up as you progress in your journey to becoming a web developer. In this post,

Angular Material Dialog

Updated 16th August 2022

Angular is an awesome framework, yet it does have a steep learning curve for many developers. This post is aimed at those with experience using Angular 2/4/5 who want to use the Angular Material Dialog. This post will assume you have already installed the @angular/material library. If you have I would refer you to take