How to pass data from child to parent when button clicked in parent

Question

I am new in angular. I have a big form. I want to make it modular. That's why I have created multiple smaller child component and all that component selector I have used in main parent component. I have save button in parent component, On click of save button all the data of form(child component) should be sent for the api call.

I know how to emit the data from child to parent using @Output, but I know only, when I click on some button in child component to emit the data from child to parent, But in my case I don't have any button in my child component. So is there any efficient way to acheive the same? Or should I not use this approach? Or any one have working example in stackblitz?

Thanks in advance!!!

check here https://stackoverflow.com/questions/43270564/dividing-a-form-into-multiple-components-with-validation — Nicolas, Feb 04 '21 at 17:30
add minimal reprouduction your application then it will more helpful understand and help you — Msk Satheesh, Feb 04 '21 at 18:10

score 1 · Answer 1 · answered Feb 04 '21 at 18:32

1

if you pass as @Input an object (that's a variable which value is an object -not a string or a number), you needn't worry about using @Output else you need make "something" to get the values of the children. The easy way is use a template reference in your children. So you has, e.g.

<child-one #childOne ...></child-one>
<child-two #childTwo ...></child-two>
<child-three #childThree ...></child-three>
<button (click)="submit(childOne,childTwo,childThree)">submit</button>

submit(childOne:any,childTwo:any,childThree:any){
   //if, e.g. you has a variable in child-one, child-two and child-three called data you can use
   this.data={dataOne:childOne.data,dataTwo:childTwo.data,dataThree:childThree.data}
   //remember that you can "reach" all the variables public in your children 
   // as, childOne.name_of_variable
}

Others configurations, give us some more data :)

answered Feb 04 '21 at 18:32

Eliseo

50,109
4
29
67

In this #childOne is variable name of @Input? because when i am passing it, then in child component I am getting wrong data, and on click of button also I am getting wrong data. Please help – Feb 05 '21 at 09:55
Are **two different aproachs**: #childOne is a template reference, when you write (click)="submit(childOne)", in function submit you has in the variable "childOne" the child-one component, any "public variable" (and in angular by defect all the variables and functions are public) of your component can be "reach". The another aproach is pass an object in an input. in this stackblitz you has the two options: https://stackblitz.com/edit/angular-ivy-acced6?file=src%2Fapp%2Fapp.component.ts – Eliseo Feb 06 '21 at 11:23
Can you please check your chat box? I need your help urgent – Feb 06 '21 at 11:30

How to pass data from child to parent when button clicked in parent

1 Answers1