[Fixed] Angular how to use translate i18n key as a function parameter in html


I am trying to pass i18n translate service key as a parameter function on html component.

I have tried the following but instead getting the text it’s getting the key

I have assigned a variable with the title in component.ts

import { TranslateService } from '@ngx-translate/core';

constructor(public translate: TranslateService,) {

public title= this.translate.instant('title-key');

and in component.html. I have this variable as a parameter function

<a class="nav-link" (click)="functionName(title)" > {{'title-key' | translate}}</a>

the title that should be sent is tasks
but instead it is sent the key -> title-key

functionName(tabSelected) {
  switch(tabSelected) {
      case this.title:
        this.tab = true;

    <kendo-tabstrip #tabstrip [keepTabContent]="true">
        <kendo-tabstrip-tab [title] = "title" *ngIf="tab" [selected]="true">
            <ng-template kendoTabContent *loadOnDemand>


You will always have trouble applying click() directly to an <a> tag. Try it this way:

<a href="javascript: void(0)">
    <i class="nav-link" (click)="function(getTitle())">{{'title-key' | translate}}</i>

and you will indeed use the click function and not the href-event of the anchor.

Your component

public title: string;

constructor(private translate: TranslateService,) { 

getTitle(): string {
   return this.translate.instant('title-key');

Leave a Reply

(*) Required, Your email will not be published