How to Pass Data from Child to Parent Component Angular

How to Pass data from child to parent component Angular

Register the EventEmitter in your child component as the @Output:

@Output() onDatePicked = new EventEmitter<any>();

Emit value on click:

public pickDate(date: any): void {
this.onDatePicked.emit(date);
}

Listen for the events in your parent component's template:

<div>
<calendar (onDatePicked)="doSomething($event)"></calendar>
</div>

and in the parent component:

public doSomething(date: any):void {
console.log('Picked date: ', date);
}

It's also well explained in the official docs: Component interaction.

How to pass data from identical multiple child component to parent in angular?

You can keep an array for all the children and their respective values in the parent component. Whenever the date value is changed in the child component, use an event emitter to pass that value to the parent. See the example below:

Child.component.ts

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';

@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.scss'],
})
export class ChildComponent {
@Input() data: any;
@Output('selectionChanged') eventEmitter: EventEmitter<any> =
new EventEmitter<any>();
constructor() {}

onDateSelection(event: any) {
const dateStr = event.target.value; //Pick date value
this.eventEmitter.emit({ id: this.data.id, date: dateStr });
}
}

Child.component.html

<p>id: {{ data.id }}</p>
<input type="date" (change)="onDateSelection($event)" />

App.component.ts (In your case this will be parent component)

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

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
title = 'so-demo';
children: any[];
constructor() {
this.children = [{ id: 1 }, { id: 2 }, { id: 3 }];
}
ngOnInit() {}

dateSelectionChanged(data: any) {
const { id, date } = data;
this.children[id - 1].date = date;
// Call your service here, I'm just gonna write to console
console.log(this.children);
}
}

App.component.html

<p>Hola! Select a few of below dates:</p>
<ng-container *ngFor="let c of children">
<app-child
[data]="c"
(selectionChanged)="dateSelectionChanged($event)"
></app-child>
</ng-container>

Passing Data onChange from child to parent? Angular

You need to use Angular's Output() directive. This is how it's done:

First: In your child component, add the following import statement:

import { Output } from '@angular/core';

Second: In the child component class: add the following property:

@Output() onChange = new EventEmitter<any>();

Now in your handleInputChange($event), you need to emit the onChange property:

handleInputChange($event){
// ... all of your logic
this.onChange.emit($event); // this will pass the $event object to the parent component.
}

Finally: In your parent component template, you can call your component like this:

<app-file-uploader (onChange)="callSomeFunction($event)"></app-file-uploader>

Note: replace callSomeFunction with whatever function you're calling.

Here's the Angular Documentation on how to use Output(). Hope this answer helps you!

How to pass data from child component to parent component when button clicked on parent component

For single ChildComponent:
Use ViewChild

For multiple ChildComponent use: ViewChildren

Parent Component TS file

Single Child Component:

tempUserFormPasswords:any=[];
@ViewChild(ChildComponent) child: ChildComponent;
.
.
.
getValueFromChild(receivedVal){
var data = child.getData();
this.tempUserFormPasswords.push(data);
}

Multiple Child Component:

tempUserFormPasswords:any=[];
@ViewChildren(ChildComponent) child: ChildComponent;
@ViewChildren(ChildComponent) children: QueryList<ChildComponent>;
.
.
.
getValueFromChild(receivedVal){
let data;
children.forEach(child => (data = this.updateData(child.data));
this.tempUserFormPasswords.push(data);
}

Passing data from children to parent with n children in Angular without emiting in each component along the way

Something like this (not checked, but as a guide):

export class MySharedService {

private data$ = new Subject<any>();
public setData(data: any) {
this.data$.next(data);
}
public getData(): Observable<any> {
return this.data$.asObservable();
}
}

then in any component that requires this data, inject via constructor and subscribe to changes:

this.mySharedService.getData().subscribe(data => ...do something here);


Related Topics



Leave a reply



Submit