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

Question

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; break; default: } } <kendo-tabstrip #tabstrip [keepTabContent]="true"> <kendo-tabstrip-tab [title] = "title" *ngIf="tab" [selected]="true"> <ng-template kendoTabContent *loadOnDemand> <app-component></app-component> </ng-template> </kendo-tabstrip-tab> <kendo-tabstrip>

Sorry, but I don't get your goal. What do you want to achieve? Please, describe the workflow. Do you just want to show some translation in the UI? — user6749601
– user6749601, Commented Mar 27, 2021 at 22:34
@Lynx242 yes I am trying to display tabs on the selected language. Please see the edited question. — Nda.S
– Nda.S, Commented Mar 27, 2021 at 22:40

score 1 · Accepted Answer · 2021-03-27 23:19:09Z

1

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> </a>

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

edited Mar 27, 2021 at 23:19

answered Mar 27, 2021 at 22:56

user6749601

Sign up to request clarification or add additional context in comments.

4 Comments

Nda.S Over a year ago

thanks for advices. the function name just a sample I will edit the question now. However this is not working..

user6749601 Over a year ago

Does it call your function? If so, what does console.log() say?

Nda.S Over a year ago

it prints 'title-key' instead of 'tasks'

user6749601 Over a year ago

Okay, now I know what your problem is! ngx-translate is not fast enough! You try to initialize the variable directly when the component starts with the translated key. This is to early for the service. try it differently. I'll update my example.

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related