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?

Read the docs https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child-local-var — silentsod, Dec 18 '16 at 01:48
Possible duplicate of [Call child component method from parent class - Angular 2](http://stackoverflow.com/questions/38974896/call-child-component-method-from-parent-class-angular-2) — silentsod, Dec 18 '16 at 01:49
[enter link description here](https://stackoverflow.com/questions/42107167/pass-data-from-child-to-parent-component-angular2/42109866 ) You can look at this link for proper explanation — Rishi.S, Apr 09 '18 at 13:53
(https://stackoverflow.com/questions/42107167/pass-data-from-child-to-parent-component-angular2/42109866) you can do as directed as here .Hope it helps. — Rishi.S, Apr 09 '18 at 13:59

score 4 · Answer 1 · answered Dec 17 '16 at 16:21

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

Amit · Answer 2 · 2019-10-18T05:50:47.930

4

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

edited Oct 18 '19 at 05:50

answered Oct 09 '17 at 09:29

Amit

1,540
1
15
28

3

Don't steal answers. Reference them: https://stackoverflow.com/a/42109866/4697384 – Charles Watson Feb 20 '19 at 16:54
This is copied answer from here => "https://stackoverflow.com/questions/42107167/pass-data-from-child-to-parent-component-angular2". – WapShivam Jun 26 '19 at 12:39
I specifically mentioned I didn’t want to use event emitter, so this answer wouldn’t help me back then – nikagar4 Jul 29 '19 at 12:44

score 1 · Answer 3 · answered Dec 17 '16 at 16:37

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;
    }
}

score 1 · Answer 4 · answered Apr 23 '19 at 10:35

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

Angular pass data from child to parent

4 Answers4