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
What Is the Most Efficient Way to Reverse an Array in JavaScript
Create Copy of Multi-Dimensional Array, Not Reference - JavaScript
Object Doesn't Support This Property or Method Rails Windows 64Bit
Keep Bootstrap Dropdown Open When Clicked Off
Why Do Empty JavaScript Arrays Evaluate to True in Conditional Structures
How to Detect If JavaScript Files Are Loaded
Typeerror: $ Is Not a Function Wordpress
How to Set the Style -Webkit-Transform Dynamically Using JavaScript
What Causes the Error "Can't Execute Code from a Freed Script"
Loading Local Files with JavaScript Without a Web Server
Node.Js Piping the Same Readable Stream into Multiple (Writable) Targets
How to Use Promise in Foreach Loop of Array to Populate an Object
How to Auto-Reload Files in Node.Js