How to pass data from child to parent in Angular 16

One of the common scenarios in Angular development is the need to pass data from a child component to its parent component. This is often necessary when a child component performs some action and the parent needs to be notified or updated based on that action.

In Angular 16, there are several ways to achieve this data passing from child to parent. Let’s take a look at a few of the most commonly used methods:

Using @Output() and EventEmitter

One of the most straightforward ways to pass data from a child component to a parent component is by using @Output() and EventEmitter. The @Output() decorator marks a child component property as an output property, and the EventEmitter class is used to emit custom events that the parent can listen for.

        
            // child.component.ts

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

            @Component({
            selector: 'app-child',
            template: `
                Notify Parent
            `
            })
            export class ChildComponent {
            @Output() notify: EventEmitter = new EventEmitter();

            notifyParent() {
                this.notify.emit('Data from child component');
            }
            }

        
    

In the parent component, we can listen for the custom event emitted by the child component using the (notify) event binding:

        
            // parent.component.ts

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

            @Component({
            selector: 'app-parent',
            template: `
                
            `
            })
            export class ParentComponent {
            onNotify(message: string): void {
                console.log(message);
            }
            }
        
    

Using @ViewChild

Another method to pass data from a child component to its parent is by using @ViewChild. The @ViewChild decorator allows the parent component to access a child component instance and call its methods or access its properties directly.

        
            // parent.component.ts

            import { Component, ViewChild } from '@angular/core';
            import { ChildComponent } from './child.component';

            @Component({
            selector: 'app-parent',
            template: `
                
            `
            })
            export class ParentComponent {
            @ViewChild(ChildComponent) childComponent: ChildComponent;

            ngAfterViewInit() {
                // Access child component instance and call its method
                this.childComponent.methodFromChild();
            }
            }
        
    

These are just a few of the methods for passing data from a child component to a parent component in Angular 16. Depending on your specific use case, you may find one method more suitable than the others. It’s important to understand the strengths and limitations of each approach and choose the one that best fits your requirements.