Angular - Using @Output Decorator

Child component can send the data to parent component through the @Output decorator. Use of this decorator is quite simple and similar to @Input decorator except that the output is actually an event emitter passing the data (output) along with event. The parent component can be subscribed for the event in the child component and get the emitted value from the child component whenever the data is changed in the child component.

Example - Usage of @Output Decorator

Let us write an @output decorator in our child component, InOutChildSample component and try to get the output from the parent component.

Step 1: Create an output event emitter in the child component, in-out-child-sample.ts along with a method to pass the value of the counter by emitting the event along with counter data in the child component, in-out-child-sample.ts.

in-out-child-sample.ts

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

@Component({
   selector: 'app-in-out-child-sample',
   imports: [],
   templateUrl: './in-out-child-sample.html',
   styleUrl: './in-out-child-sample.css',
})
export class InOutChildSample {
   @Input() counter : number = 0;
   @Output() counterEvent = new EventEmitter();
   passCounterToParent() {
      this.counterEvent.emit(this.counter)
   }
}

Step 2: Open the child component template, in-out-child-sample.html and add a button to invoke the counter event when the user clicks the button.

in-out-child-sample.html

<div>
  <p>Counter: {{counter}}</p>
  <button (click)="passCounterToParent()">Pass Counter to Parent</button>
</div>

Here,

• click is the button click event and it is configured to run passCounterToParent() function when it is clicked.

Step 3: Add a variable in the parent component to hold the output data passed through event from child component. Also, add a function in the parent component to get the output data passed through event from child component.

App.js

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { InOutChildSample } from './in-out-child-sample/in-out-child-sample';
@Component({
  selector: 'app-root',
  imports: [RouterOutlet, InOutChildSample],
  templateUrl: './app.html',
  styleUrl: './app.css'
})
export class App {
   title = 'sample-app';
   counter = 10;
   childCounter: number = 0;   
   inc() {
      this.counter++
   }   
   get(val: number) {
      this.childCounter = val;
   } 
}

Step 4: Open the parent component template, app.html and add the code as shown below −

app.html

<button (click)="inc()">Increment counter</button>
<p>Data from child: {{childCounter}}</p>
<app-in-out-child-sample [counter]="counter" (counterEvent)="get($event)" />

Here,

• counterEvent is the event from the child component

• get($event) is the callback function. $event will hold the current counter value.

• childContent is the data from the child component.

Output

Step 5: Finally, run the application and you can see that the child component will send the updated counter value to the parent component when the button in the child component is clicked.