How to pass input value to parent component

Question

I want to pass the input value to the parent component. I am currently sending all ElementRef input from my child component. Is there an elegant way to do this? I mean, I need to send only one number, not an entire link.

Children's component:

 import { Component, ViewChild } from '@angular/core'; @Component({ selector: 'app-action-dialog-content', template: ` <md-input-container> <input #amount md-input placeholder="Amount"> <span md-suffix>€</span> </md-input-container> ` }) export class ActionDialogContentComponent { @ViewChild('amount') amount; } 

Parent component:

 import { Component, ViewChild } from '@angular/core'; import { ActionDialogContentComponent } from './../action-dialog-content/action-dialog-content.component'; @Component({ selector: 'app-action-dialog', template: ` <app-action-dialog-content></app-action-dialog-content> <md-dialog-actions> <button md-raised-button (click)="sendData()">ADD</button> </md-dialog-actions> ` }) export class ActionDialogComponent { @ViewChild(ActionDialogContentComponent) amountInput: ActionDialogContentComponent; sendData() { console.log(this.amountInput.amount.nativeElement.value); } } 

Answer 1

You can use the EventEmitter and Output from angular / core to pass data from the child component to the parent, which the parent component can handle through event binding. See the interaction between children and parent components in the Angular 2 tutorials.

In your example:

Child:

 export class ActionDialogContentComponent { amount: number; @Output() amountChanged: new EventEmitter<number>(); changeAmount() { //Trigger this call from the child component template this.amountChanged.emit(this.amount); } } 

Parent (note that the html event you are binding corresponds to the @Output property from the child component):

 @Component({ selector: 'app-action-dialog', template: ` <app-action-dialog-component (amountChanged)="onAmountChanged($event)"></app-action-dialog-component> <md-dialog-actions> <button md-raised-button (click)="sendData()">ADD</button> </md-dialog-actions> ` }) export class ActionDialogComponent { onAmountChanged(amount: number) { // do what you want with new value } } 

Answer 2

you can use EventEmitter to make this code from a shared link, so it can be easily referenced, please check this link for more details

Component Child Code

 import { Component, EventEmitter, Input, Output } from '@angular/core'; @Component({ selector: 'my-voter', template: ` <h4>{{name}}</h4> <button (click)="vote(true)" [disabled]="voted">Agree</button> <button (click)="vote(false)" [disabled]="voted">Disagree</button> ` }) export class VoterComponent { @Input() name: string; @Output() onVoted = new EventEmitter<boolean>(); voted = false; vote(agreed: boolean) { this.onVoted.emit(agreed); this.voted = true; } } 

Parent component code

 import { Component } from '@angular/core'; @Component({ selector: 'vote-taker', template: ` <h2>Should mankind colonize the Universe?</h2> <h3>Agree: {{agreed}}, Disagree: {{disagreed}}</h3> <my-voter *ngFor="let voter of voters" [name]="voter" (onVoted)="onVoted($event)"> </my-voter> ` }) export class VoteTakerComponent { agreed = 0; disagreed = 0; voters = ['Mr. IQ', 'Ms. Universe', 'Bombasto']; onVoted(agreed: boolean) { agreed ? this.agreed++ : this.disagreed++; } }