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?

Oscar

Read the docs angular.io/docs/ts/latest/cookbook/… – Gautier

Possible duplicate of Call child component method from parent class - Angular 2 – Gautier

[enter link description here](#42107667 ) You can look at this link for proper explanation – Bayonet

(#42107667) you can do as directed as here .Hope it helps. – Bayonet

Answer 1

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

Polaris

Answer 2

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 : https://mcmap.net/q/234377/-how-to-pass-data-from-child-to-parent-component-angular

Aborn

Don't steal answers. Reference them: https://mcmap.net/q/234377/-how-to-pass-data-from-child-to-parent-component-angular – Affection

This is copied answer from here => "#42107667". – Decorum

I specifically mentioned I didn’t want to use event emitter, so this answer wouldn’t help me back then – Oscar

Answer 3

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

Edgar

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

Oniskey