CODEWITHSUNDEEP
angularcomponents
Runtime Terror
Runtime Terror

Reputation: 6752

How to pass a input value to a parent component

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

  }

}

Upvotes: 6

Views: 7913

Answers (2)

rashfmnb
rashfmnb

Reputation: 10588

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

Upvotes: 0

ironmanwaring
ironmanwaring

Reputation: 91

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

Upvotes: 4

Related Questions