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

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;
  }
}