Angular pass data from child to parent

Question

I'm learning/working on Angular project, I've done a lot and I try to do the things "right way", so now what i want to do is this:

I want to get the variable (output) from child component to parent component, but I don't want to use output, I don't want to listen to it, I want to get it whenever parent needs it, something like child.getVariable() I've came across one post which said I should use childview but the question wasn't same as mine, so I want to know is it a good practice to use childview to get data from child component or not?

Answer 1

If you want to access a child component synchronously then it might be a good practice to use ViewChild as follows:

import { CountryCodesComponent } from '../../components/country-codes/country-codes.component';
import { Component, ViewChild } from '@angular/core';

@Component({
    selector: 'signup',
    templateUrl: "signup.html"
})
export class SignupPage {
    @ViewChild(CountryCodesComponent)
    countryCodes: CountryCodesComponent;
    nationalPhoneNumber = '';

    constructor() {}

    get phoneNumber(): string {
        return '+' + this.countryCodes.countryCode + this.nationalPhoneNumber;
    }
}

Answer 2

Do you only need access to the child component's variable from within the parent's template? If so, you can use:

<child-component #childComponentRef></child-component>

You then have access to #childComponentRef.someVariable from within your parent template. Otherwise I think the Angular team recommends shared services. They are a bit more versatile anyways. See https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-and-children-communicate-via-a-service

Answer 3

Register the EventEmitter in your child component as the @Output:

@Output() onDatePicked: EventEmitter<any> = new EventEmitter<any>();
Emit value on click:

public pickDate(date: any): void {
    this.onDatePicked.emit(date);
}

Listen for the events in your parent component's template:

<div>
    <calendar (onDatePicked)="doSomething($event)"></calendar>
</div>

and in the parent component:

public doSomething(date: any):void {
    console.log('Picked date: ', date);
}

Ref : stackoverflow.com/a/42109866/4697384

Answer 4

Ways how Parents can communicate with Child components in Angular.

(i) The child component exposes an EventEmitter property with which it emits events when something happens. The parent binds to that event property and reacts to those events.

(ii) A parent component cannot use data binding to read child properties or invoke child methods. You can do both by creating a template reference variable for the child element and then reference that variable within the parent template

(iii) The local variable approach is simple and easy. But it is limited because the parent-child wiring must be done entirely within the parent template. The parent component itself has no access to the child.

(iv) Parent and Children can communicate via service.

For detailed explanation you can refer to below link :

Angular Official website- Components communication