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