1. Set Up the Child Component for Output

The official Angular guide explains that the “@Output() decorator in a child component or directive lets data flow from the child to the parent.” That is precisely the mechanism we need here.

For this to work, the child class relies on two pieces:

  • @Output() — a decorator that flags a named class field as an output property.
  • EventEmitter — the utility used to emit custom events.
// Child.ts

...

export class InputBookComponent implements OnInit {
  @Output() bookTitleCreated = new EventEmitter<{ title: string }>();
  bookTitle: string;
  ...

  onAddTitle() {
    this.bookTitleCreated.emit({ title: this.bookTitle });
  }
}
Enter fullscreen mode Exit fullscreen mode

With this setup, the Child component emits an event each time the user clicks the “Add Title” button we placed in Child.html.

// Child.html

<div>
  <input type="text" placeholder="Write a title" [(ngModel)]="bookTitle">
  <button (click)="onAddTitle()">Add Title</button>
</div>
Enter fullscreen mode Exit fullscreen mode

2. Listen to the Event in the Parent Template

Next, the Child selector inside the Parent template (i.e., parent.html) must be configured to detect and react to this event.

This is done with event binding (see the Binding a click event section). By attaching the binding to the Child selector, the Parent template subscribes to the event coming from the Child instance.

// Parent.html

...

<child-selector (bookTitleCreated)=onBookAdded($event)></child-selector>
Enter fullscreen mode Exit fullscreen mode

The event we are subscribing to is bookTitleCreated. When the event is detected, the selector triggers the onBookAdded() method and passes the $event payload along with it.

At this stage, the Parent is aware of the event, but the actual handler onBookAdded() still needs to be defined in Parent.ts so the incoming data (originating from the input element inside Child.html) can be captured and stored.

3. Handle the Data in the Parent Class

Inside Parent.ts, we implement the onBookAdded() method. It accepts the payload — in this case an object with a title key holding a string value.

The received object is then appended to the existing favBook array using the concat method.

// Parent.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'BindingUp';
  favBooks = [
    { title: 'Principles' },
    { title: 'The Story of Success' },
    { title: 'Extreme Economies' },
  ];

  onBookAdded(eventData: { title: string }) {
    this.favBooks = this.favBooks.concat({
      title: eventData.title,
    });
  }
}
Enter fullscreen mode Exit fullscreen mode

Wrapping Up

If you want to see this in action, take a look at this practical example.

Otherwise, just keep these three steps in mind:

  1. Prepare Child component to emit data
  2. Bind Property in Parent Component template
  3. Use Property in Parent Component class

As a final note, Angular Services offer an alternative pattern that may be simpler for certain use cases.