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

Question

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() { } }

will it help? github.com/angular/material2/blob/master/src/demo-app/dialog/… — Julia Passynkova
– Julia Passynkova, Commented Apr 27, 2017 at 11:17
@JuliaPassynkova i can seen it but my problem is can't use more than one component in ts file — niranchan
– niranchan, Commented Apr 27, 2017 at 11:27
I want to pass full html template from child to parent popup element — niranchan
– niranchan, Commented Apr 27, 2017 at 11:29

Powkachu · Accepted Answer · 2017-04-27 11:41:05Z

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

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related