Simple Way To Execute A Function In A Component From Another Component

Introduction

In this post, we will execute a function in a component from another component in Angular. We will pass the data from one component to another component as well. For this, we are using EventEmitter service. In Angular, a component can emit an event using @Output and EventEmitter. The eventEmitter.on() method is used to register listeners, while the eventEmitter.emit() method is used to trigger the event. We can use various options to execute functions from another component in angular.

Create a new Angular Project using Angular CLI

 

I am using Angular 7.

 

 

ng new EventEmitterExample

In Angular 7, we can create a routing module along with the project creation. It will take some moments to create all the node modules. Our project will be created after some time.

We can create three components. “Home”, “First” and “Second” respectively.

We need to change the folder to “EventEmitter” in command prompt and create “Home” component.

 

ng g c Home

Now create “First” and “Second” respectively.

ng g c First
ng g c Second

We can open the code in any IDE and edit the code. I am using Visual Studio Code for editing the code.

We can edit the “app.component.html” file with the below code.

 

app.component.html

<ul>
  <li class="active"><a  routerLink="home">Home Component</a></li>
  <li><a routerLink="first">First Component</a></li>
  <li><a routerLink="second">Second Component</a></li>
</ul>
<router-outlet></router-outlet>

We can create a function inside the “first.component.ts” file and call from “first.component.html” file.

first.component.ts

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

@Component({
  selector: 'app-first',
  templateUrl: './first.component.html',
  styleUrls: ['./first.component.css']
})
export class FirstComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  firstFunction() {
    alert( 'Hello ' + '\nWelcome to C# Corner \nFunction in First Component');
  }
}

first.component.html

<p>
  First Component
</p>

<div>
  <input type="button" value="Call Function" (click)="firstFunction()">
</div>

We can modify the “app-routing.module.ts” file.

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { FirstComponent } from './first/first.component';
import { SecondComponent } from './second/second.component';

const routes: Routes = [
  { path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  },
  { path: 'home', component: HomeComponent },
  { path: 'first', component: FirstComponent },
  { path: 'second', component: SecondComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

We need a service to create EventEmitter instance. We can create this service using Angular CLI.

 

 

ng g s event-emitter

Do not forget to add service provider reference in “app.module.ts” file.

 

 

 

We can modify the “event-emitter.service.ts” file with below code.

 

event-emitter.service.ts

import { Injectable, EventEmitter } from '@angular/core';
import { Subscription } from 'rxjs/internal/Subscription';

@Injectable({
  providedIn: 'root'
})
export class EventEmitterService {

  invokeFirstComponentFunction = new EventEmitter();
  subsVar: Subscription;

  constructor() { }

  onFirstComponentButtonClick() {
    this.invokeFirstComponentFunction.emit();
  }
}

 

 

We have defined an EventEmitter variable “invokeFirstComponentFunction” and a Subscription variable “subsVar”.

 

“invokeFirstComponentFunction” variable will be used in another method “onFirstComponentButtonClick” to emit the event and “subsVar” will be used later in event subscription.

 

We can go to “second.component.ts” component and create an event emitter service variable in the constructor. We will also create a function to invoke the EventEmitter method in service.

 

second.component.ts

import { Component, OnInit } from '@angular/core';
import { EventEmitterService } from '../event-emitter.service';

@Component({
  selector: 'app-second',
  templateUrl: './second.component.html',
  styleUrls: ['./second.component.css']
})
export class SecondComponent implements OnInit {

  constructor(
    private eventEmitterService: EventEmitterService
  ) { }

  ngOnInit() {
  }

  firstComponentFunction(){
    this.eventEmitterService.onFirstComponentButtonClick();
  }
}

 

We have created a “firstComponentFunction” to call the event emitter service. This will automatically invoke the event in service.

We can modify the “second.component.html” with the below code to create a button in UI.

 

second.component.html

<p>
  Second Component
</p>

<div>
  <input type="button" value="Call First Component Function" (click)="firstComponentFunction()">
</div>

We can modify the “first.component.ts” again to subscribe the even emitter event.

 

first.component.ts

import { Component, OnInit } from '@angular/core';
import { EventEmitterService } from '../event-emitter.service';

@Component({
  selector: 'app-first',
  templateUrl: './first.component.html',
  styleUrls: ['./first.component.css']
})
export class FirstComponent implements OnInit {

  constructor(
    private eventEmitterService: EventEmitterService
  ) { }

  ngOnInit() {
    if (this.eventEmitterService.subsVar==undefined) {
      this.eventEmitterService.subsVar = this.eventEmitterService.
      invokeFirstComponentFunction.subscribe((name:string) => {
        this.firstFunction();
      });
    }
  }

  firstFunction() {
    alert( 'Hello ' + '\nWelcome to C# Corner \nFunction in First Component');
  }
}

 

 

We have subscribed the “invokeFirstComponentFunction” event in event emitter service and called the “firstFunction” method inside it.

 

Our code is ready now. We can run the application. We can click the first component link.

 

 

We can click the “Call Function” button. It will call the function in the first component. 

 

 

Now we can click the second component link and click the “Call First Component Function” button. It will execute the function from the first component and will show the same message box as given below.

 

 

We have successfully executed the function from another component.

 

We can even pass any data through this event emitter. We can modify the event emitter service by passing a “name” parameter.

 

 

We must modify the “first.component.ts” and “second.component.ts” files too.

“first.component.ts” file.

 

 

 

“second.component.ts” file

 

 

 

We can modify the “first.component.html” with the below code.

 

first.component.html

<p>
  First Component
</p>

<div>
  <input type="text" #name>
  <br>
  <input type="button" value="Call Function" (click)="firstFunction(name.value)">
</div>

Modify the “second.component.html” with the below code.

second.component.html

<p>
  Second Component
</p>

<div>
  <input type="text" #name>
  <br>
  <input type="button" value="Call First Component Function" (click)="firstComponentFunction(name.value)">
</div>

We can run the application again and click first component and then click second component.

 

 

We have successfully passed data from one component to another component and called the function.

 

In this post, we have created an event emitter service and executed a function in a component from another component. We have passed the data from one component to another component too.