CODEWITHSUNDEEP
htmlangular
niranchan
niranchan

Reputation: 296

how can i pass value from child to parent component in angular 2?

I need to get data from child component. My child component has form which is in popu. How can i pass full details to parent component. my parent component ts file is 

    import { Component, OnInit } from '@angular/core';
import {MdDialog, MdDialogRef} from '@angular/material';

@Component({
    selector: 'app-vehicle-relocate',
    templateUrl: './vehicle-relocate.component.html',
    styleUrls: ['./vehicle-relocate.component.css'],
})
export class VehicleRelocateComponent implements OnInit {

    lat: number = 11.074529;
    lng: number = 78.003917;
    zoom: number = 14;

    ngOnInit() {
    }

    selectedOption: string;

  constructor(public dialog: MdDialog) {}

  openDialog() {
    let dialogRef = this.dialog.open();
    dialogRef.afterClosed().subscribe(result => {
      this.selectedOption = result;
    });
  }
}

My child component is in parent component

import { Component, OnInit, Input } from '@angular/core';
import {MdDialog, MdDialogRef} from '@angular/material';

@Component({
  selector: 'app-relocate-form',
  templateUrl: './relocate-form.component.html',
  styleUrls: ['./relocate-form.component.css']
})
export class RelocateFormComponent implements OnInit {

  constructor(public dialogRef: MdDialogRef<RelocateFormComponent>) {}
  @Input() title:string;

  ngOnInit() {
  }

}

Upvotes: 2

Views: 1882

Answers (1)

Powkachu
Powkachu

Reputation: 2268

You can add an Output to your child component. For example: @Output() notifySubmit : EventEmitter<any> = new EventEmitter<any>()(you can put whatever type you want if you don't want 'any').

Then when you're submitting the form in your child component, you have to notify the parent with the Output:

this.notifySubmit.emit(myValues)

Now you have to receive the event in the parent component. When you call your RelocateFormComponent from VehicleRelocateComponent you need to pass a function to the Output.

<app-relocate-form (notifySubmit)="myFunction($event)" ... ></app-relocate-form>

myFunction($event)has to be in the parent component. The $event parameter equals to what you sent with this.notifySubmit.emit(myValues).

Upvotes: 4

Related Questions