I have a Submitbutton in the parent component namely
personDetails.
personDetailshas many
person` components. Whenever I click on the Submit button, I want to call a method in child component.
How can I emit an event from a parent to a child component using @Output
?
Its easy to do it from the child to the parent. I want to access a value of the child component, hence I need to emit an event from parent to child.
In a parent component you can use @ViewChild() to access child component's method/variable. Use the @Input() decorator in your child component to allow the parent to bind to this input. To bind a property from parent to a child you must add in you template the binding brackets and the name of your input between them.
To pass an onChange event handler to a child component in React: Define the event handler function in the parent component. Pass it as a prop to the child component, e.g. <Child handleChange={handleChange} /> . Set it to the onChange prop on the input field in the child.
The @Input() decorator allows data to be input into the child component from a parent component. A child component can have multiple fields with the input decorator and each field can be of any type (string, number, object, etc…).
@Input() and @Output() give a child component a way to communicate with its parent component. @Input() lets a parent component update data in the child component. Conversely, @Output() lets the child send data to a parent component.
You can create one service which is shared between your parent and child component in which you can define Observable
so that you can subscribe to that Observable
from child and perform some action when you receive some value from parent.
//common.service.ts
import { Injectable, Inject } from '@angular/core';
import { Subject } from 'rxjs/Subject';
@Injectable()
export class CommonService {
private notify = new Subject<any>();
/**
* Observable string streams
*/
notifyObservable$ = this.notify.asObservable();
constructor(){}
public notifyOther(data: any) {
if (data) {
this.notify.next(data);
}
}
}
//parent.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import { CommonService } from './common.service';
@Component({
selector : 'parent',
templateUrl : './parent.html'
})
export class ParentComponent implements OnInit, OnDestroy {
constructor( private commonService: CommonService ){
}
ngOnInit() {
this.commonService.notifyOther({option: 'call_child', value: 'From child'});
}
}
//child.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import { CommonService } from './common.service';
@Component({
selector : 'child',
templateUrl : './child.html'
})
export class ChildComponent implements OnInit, OnDestroy {
private subscription: Subscription;
constructor( private commonService: CommonService ){
}
ngOnInit() {
this.subscription = this.commonService.notifyObservable$.subscribe((res) => {
if (res.hasOwnProperty('option') && res.option === 'call_child') {
console.log(res.value);
// perform your other action from here
}
});
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
}
In childComponent.ts
@Input() private uploadSuccess: EventEmitter<boolean>;
Additionally in childComponent.ts
subscribe to the event:
ngOnInit() {
if (this.uploadSuccess) {
this.uploadSuccess.subscribe(data => {
// Do something in the childComponent after parent emits the event.
});
}
}
In ParentComponent.html
<app-gallery [uploadSuccess] = "uploadSuccess" > </app-gallery>
In ParentComponent.ts
private uploadSuccess: EventEmitter<boolean> = new EventEmitter();
onImageUploadSuccess(event) {
console.log('Image Upload succes');
if (event.code === 'OK' && this.maxUploadLimit > 0) {
this.galleryImagesCount = this.galleryImagesCount + 1;
this.maxUploadLimit = this.maxUploadLimit - 1;
}
// The parent emits the event which was given as `@Input` variable to the child-component
this.uploadSuccess.emit(true);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With