Published -

To be able to call a parents component form the child component, you need to use Angular EventEmitter.  Emitting events allows your components to communicate with one another when a certain action has been executed. This is similar to the @Input() decorator, but here we use the @Output() decorator. Below is an example of how to use EventEmitters.

This post is intended for those who already have an understanding of Angular.

Parent Component 

   selector: 'parent-component',
   template: `
    <p>I’m a parent component</p>
    <child-component (refresh)=”myFunction()”></child-component>

export class ParentComponent {
          alert(“This has been called from the child component!”);          


Child Component 

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

export class ChildComponent extends ParentComponent {
     @Output() refresh: EventEmitter<string> = new EventEmitter();

Here the child component contains a button, which when clicked calls a function name clickFunction. This function then calls the refresh emitter, which then calls the parent component function myFunction.

If you have any questions, please leave a comment.

For more Development tutorials, check out our Web Development category.


Leave a Reply

Your email address will not be published. Required fields are marked *

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