How to call a function from another component in Angular 17?

Ayyaz Zafar
5 min readMay 30, 2024
How to call a function from another component in Angular 17?

Are you working on an Angular project and need to call a function from a different component? This is a common task in Angular development, and there are a few different ways to achieve it. In this blog post, we’ll explore two popular methods: using child components and utilizing services.

Method 1: Using Child Components

This method is simple and straightforward, but it requires the target component to be a direct child of the component calling the function.

1- Create a Child Component: Start by generating a new component using the Angular CLI. For example, we’ll create a child component called “child”.

ng generate component child

2- Define the Function in the Child Component: Within the child component’s TypeScript file, define the function you want to call.

import { Component } from '@angular/core';
@Component({
selector: 'app-child',
standalone:true,
templateUrl: './child.component.html',
styleUrls: ['./child.component.scss'],
imports: [CommonModule, RouterOutlet],
})
export class ChildComponent {
headingVisible = false;
showHeading(): void {
// Your logic here
this.headingVisible = true;
}
}

--

--