How can i pass the function for a on click event at the component?

Question

Component1 code. I want to pass to this component the name of the function that run at the click in the link.

`<a [routerLink]="linkTo" class="nav-link" (click)="CLICKFUNCTION">
    <span class="sidebar-icon">
      <ng-content></ng-content>
    </span>
    <span class="sidebar-text">{{text}}</span>
</a>`

Here i am using component1. And i want to pass to the component the name of the function.

<component1 text="Logout" functionName="CLICKFUNCTION"> </component1>

Answer 1

Seems we could use @Output here to achieve your scenario. It allows communication between parent and child component.

component1.ts

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

@Component({
  ....
})

export class Component1 implements OnInit {
  @Output clickLink = new EventEmitter(); // define output

  constructor() { }

  ngOnInit() { }
}

component1.html

<a [routerLink]="linkTo" class="nav-link" (click)="clickLink.emit()">

parent.html

<component1 text="Logout" (clickLink)="CLICKFUNCTION()"> </component1>

So, whenever router link inside component1 is clicked, it will run CLICKFUNCTION()

Reference:

• https://angular.io/guide/inputs-outputs#sending-data-to-a-parent-component