There are several ways to call the function() in parent component from the child component of angular 4 such as input bindings, setters, service, etc. According to my understanding, the easiest way is using the service. In this tutorial, I will share how to communicate parent and child component using router-outlets and services method.
Another article: Simple Login Form Angular 4 Tutorial For Beginner
As written in the official documentation angular 4, there are seven ways to communicate with parent and child, among others:
- Pass data from parent to child with input binding.
- Intercept input property changes with a setter.
- Intercept input property changes with ngOnChanges().
- Parent listens for child event.
- Parent interacts with child via local variable.
- Parent calls an @ViewChild().
- Parent and children communicate via a service.
To be able to communicate via service, we need an angular 4 service that can be executed on each component. We start the following tutorial
Tutorial angular 4 call parent function from child via service and router-outlet
Note: I use angular-cli to create an example of this project
1. Create an angular 4 service with the following command
1 | ng g service service/com-parent-child |
2. Add the following script to com-parent-child.service.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | import { Injectable } from '@angular/core'; import { Observable } from 'rxjs'; import { Subject } from 'rxjs/Subject'; @Injectable() export class ComParentChildService { private subjects: Subject[] = []; publish(eventName: string) { // ensure a subject for the event name exists this.subjects[eventName] = this.subjects[eventName] || new Subject(); // publish event this.subjects[eventName].next(); } on(eventName: string): Observable { // ensure a subject for the event name exists this.subjects[eventName] = this.subjects[eventName] || new Subject(); // return observable return this.subjects[eventName].asObservable(); } } |
3. Import service and add provider in app.module.ts
1 2 3 4 5 6 7 8 | import { ComParentChildService } from './service/com-parent-child.service'; @NgModule({ declarations: [], imports: [], providers: [ComParentChildService], bootstrap: [AppComponent] }) |
Examples of using the service are as follows.
1. add the following script to the parent component
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | import { ComParentChildService} from 'services/com-parent-child.service'; ............... .............. constructor( private comparentchildservice: ComParentChildService) { } ngOnInit() { this.subscription = this.comparentchildservice.on('call-parent').subscribe(() => this.parentFunction()); } ngOnDestroy() { this.subscription.unsubscribe(); } parentFunction(){ console.log('parent function was called') } |
2. Add the following script to the child component
1 2 3 4 5 6 7 8 9 | import { ComParentChildService} from 'services/com-parent-child.service'; ............... .............. constructor( private comparentchildservice: ComParentChildService) { } tesClick(){ this.comparentchildservice.publish('call-parent'); } |
3. Add the following script to the child template
1 | <button (click)="tesClick()">Test parent function button</button> |
If the above script executed, the application will work like the following picture.
Related article: Tutorial Create Angular 4 Currency Format Directive For Textbox
Reference:
Hopefully, tutorial angular 4, How to call parent function from child component can be useful for your application.
Latest posts by Sigit Prasetya Nugroho (see all)
- Tutorial Create Todolist App With Vue Js 2 For Beginners - September 29, 2018
- Create WordPress Slider Without Javascript - August 30, 2018
- Typed.js The Javascript Library For Automatic Text Writing Effects - August 6, 2018