Angular Child To Parent Communication - Simplified

I don't know about you all, but as a young developer, having things broken down into simple steps makes my brain feel some sort of way.

First off, let's talk about what makes a component a considered a parent or a child. Yes, I know, easy--but bear with me. I didn't get it at first, so maybe you are in the same boat I am.

Let's say you have two components, <app-parent> and <app-child>.

These components are usually made up of an .html, spec.ts, .css, and .ts file.

A parent component holds a child's html selector in the parent's html file.

parent.html

<h1>Hi this is the parent component, I hold the child component below.</h1>
<app-child></app-child>

OK, now that that's all sorted, let's pass some data.

STEP ONE - Let's output our data from the child.

In the child.ts file,

import { Output, EventEmitter } from '@angular/core'

@Output() variableEvent = new EventEmitter();

You can name it anything, but most people tag the word 'Event' to the end of their variable name. Don't forget to import @Output() and EventEmitter. Sometimes, if you auto import EventEmitter (and you aren't paying attention), it'll import from the wrong file, so make sure it's from @angular/core.

STEP TWO - Let's trigger it. You can trigger it on a (click) button function. Or when the component is initialized with onInit, or any number of ways you decide to trigger your function.

In the child.ts file,

functionName() {
this.variableEvent.emit(value)
}

Value is whatever you need it to be. A number, variable, boolean, ect.

STEP THREE

In the parent.ts file,

variable;

variableEvent($event) {
this.variable = $event;
}

You can name your function anything, but I like to keep it the same as the EventEmitter back in the child function. This function is triggered by the child function calling to it. So don't put it inside of another function.

STEP FOUR

Let's connect them together now.

In the parent.html file,

<app-child (variableEvent)="variableEvent($event)></app-child>

And there you go, you should have data passing from your child to your parent. Hope this helped another newbie like myself! There is more in depth knowledge on this on the angular documentation. Make sure you check it out!

Comments

[Vengatesh TR]

Very good explanation. Thank you

[markbennetty]

Communication between a parent and child component in Angular can be a bit daunting. In this article, we will explore a simplified way to communicate between these two Angular concepts. Let's say we have a parent component that displays a list of items. We also have a child component that allows for the addition of new items to the list. In order to communicate between these two components, we need to use the @Input and @Output decorators. The @Input decorator is used to specify data that is being passed from the parent to the child. The @Output decorator is used to pass data from the child back up to the parent. In our example, we need to use the @Output decorator on the child's addItem() method. This will allow us to emit an event that will be caught by the parent. The parent can then use this event to add the new item to its list. This article has only scratched the surface of Angular communication. For more comprehensive coverage, please refer to the official Angular documentation. Thanks for reading!