Search code examples
angularangular-decorator

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

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>

Solution

  • 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: