How to pass a input value to a parent component

Question

I want to pass value of a input to a parent component. Currently I'm sending the whole input's ElementReffrom my child component. Is there an elegant way to doing this? I mean, I need to send only one number, not a whole reference.

Child 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 EventEmitter and Output from angular/core to emit data from the child component to the parent, which the parent component can then handle through event binding. See child to parent component interaction in the Angular 2 guides.

From your example:

Child:

export class ActionDialogContentComponent {

  amount: number;
  @Output() amountChanged: new EventEmitter<number>();

  changeAmount() { //Trigger this call from the child component's template
    this.amountChanged.emit(this.amount);
  }
}

Parent (note that the html event you are binding to matches 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 do this code is from the link shared so it can be easily reference please check this link for more detail

Child Component 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++;
  }
}