angular - How to pass data to child component? -

i have 2 components

• formcomponent
• test1component

1) formcomponent has 3 buttons reset, save , add

2) test1component has form fields "first name" , "last name"

3) formcomponent uses ng-content load contents of test1component

4) formcomponent , test1component both have saveform() method

when save button clicked trying form values, process them first @ test1component.saveform() pass processed form values formcomponent.saveform()

the way written now, execution first goes formcomponent.saveform() emits save event triggers test1component.saveform()

now, how pass processed data test1component.saveform() formcomponent.saveform()?

code below

form.component.ts

import { component, input, output, eventemitter } '@angular/core';  @component({   selector: 'app-form',   templateurl: './form.component.html',   styleurls: ['./form.component.css'] }) export class formcomponent{   @input() headertitle:string = "header title";   @input() savebtntext:string = "save";   @input() resetbtntext:string = "reset";   @input() addbtntext:string = "add";   @output() save:eventemitter<any> = new eventemitter();    constructor(){}    saveform(e: any){     this.save.emit("save");     console.log("form save");   } } 

form.component.html

<div class="panel panel-default fcs-form">   <div class="panel-header form-header">         {{headertitle}}   </div>     <div class="panel-body form-body">     <ng-content select="[form-body]"></ng-content>   </div>     <div class="panel-footer text-center form-footer">         <button class="btn btn-primary">{{resetbtntext}}</button>       <button class="btn btn-primary" (click)="submitform()"> {{savebtntext}} </button>       <button class="btn btn-primary">{{addbtntext}}</button>   </div> </div> 

test1.component.ts

import { component } '@angular/core'; import { formgroup, formbuilder } '@angular/forms'; import { formcomponent } '../form/form.component';  @component({   selector: 'app-test1',   templateurl: './test1.component.html',   styleurls: ['./test1.component.css'] }) export class test1component{   complexform : formgroup;    constructor(private fb: formbuilder){     this.complexform = fb.group({         'firstname' : "",         'lastname': "",         'gender' : "female",         'hiking' : false,         'running' : false,         'swimming' : false     });   }    saveform(){     console.log("child form save");   } } 

test1.component.html

<app-form headertitle="my header" (save)="saveform($event)">    <div form-body>       <p>fill form</p>       <div class="jumbotron">          <form [formgroup]="complexform">             <div class="form-group">                <label>first name:</label>                <input class="form-control" type="text" placeholder="john" [formcontrol]="complexform.controls['firstname']">             </div>             <div class="form-group">                <label>last name</label>                <input class="form-control" type="text" placeholder="doe" [formcontrol]="complexform.controls['lastname']">             </div>          </form>       </div>    </div> </app-form> 

this how looks in ui

i tried @input, this

@input() formdata;  // in form.component.ts 

and added [formdata] in test1.component.html

<app-form headertitle="my header" [formdata]="complexform.value" (save)="saveform($event)"> 

but in formcomponent.saveform() gave undefined.