Implement angular translation as an argument for a notification function

Question

Implement angular translation as an argument for a notification function

Can anyone help me figure out how to pass a string message as a parameter to my AddRemoveUserOfGroupGeneral function? I am using matToolTip without any issues, but I'm struggling to pass it to my function:

<button mat-raised-button color="primary" matTooltip="{{ 'GROUPS.addUserToGroup' | translate }}" matTooltipPosition="above" (click)="AddRemoveUserOfGroupGeneral('add', 'I WANT MY VARIABLE GROUPS.addUserToGroup THERE ?');">Ajouter <mat-icon>add_box</mat-icon></button>

Using Angular 11 and Typescript 4.0.5. I appreciate any assistance!

angular typescript ngx-translate

Answer 1

Answer №1

To translate a message in your TypeScript code using the ngx-translate library, you need to first import the TranslateService in your component and declare it in the constructor.

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

Update your constructor to include

public translate: TranslateService

.

constructor(public translate: TranslateService) {}

Now you can use this.translate.get('myKey'); to fetch translations wherever needed, such as in the example below:

AddRemoveUserOfGroupGeneral(arg1, key) {
  ...
  let message = this.translate.get(key);
  console.log(message)
  ...
}

Simply pass the translation key from your HTML template like this:

<button mat-raised-button color="primary" matTooltip="{{ 'GROUPS.addUserToGroup' | translate }}" matTooltipPosition="above" (click)="AddRemoveUserOfGroupGeneral('add', 'GROUPS.addUserToGroup');">Ajouter <mat-icon>add_box</mat-icon></button>

Answer 2

To translate a message in your TypeScript code using the ngx-translate library, you need to first import the TranslateService in your component and declare it in the constructor.

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

Update your constructor to include

public translate: TranslateService

.

constructor(public translate: TranslateService) {}

Now you can use this.translate.get('myKey'); to fetch translations wherever needed, such as in the example below:

AddRemoveUserOfGroupGeneral(arg1, key) {
  ...
  let message = this.translate.get(key);
  console.log(message)
  ...
}

Simply pass the translation key from your HTML template like this:

<button mat-raised-button color="primary" matTooltip="{{ 'GROUPS.addUserToGroup' | translate }}" matTooltipPosition="above" (click)="AddRemoveUserOfGroupGeneral('add', 'GROUPS.addUserToGroup');">Ajouter <mat-icon>add_box</mat-icon></button>

Implement angular translation as an argument for a notification function

Answer №1

Similar questions

Zendesk API integration with Angular is experiencing issues with retrieving data as a result of a CORS restriction

The attribute 'split' is not found on the never data type

How to send Multipart form data with a string payload

The 'innerHTML' property is not present in the 'EventTarget' type

The flexbox layout is not properly stacking div rows in a column

Cancelling an ongoing AWS S3 upload with Angular 2/Javascript on button click

Establishing a Next.js API endpoint at the root level

I'm having trouble understanding why I can't access the properties of a class within a function that has been passed to an Angular

Ways to define an interface that can accommodate various interfaces with a specific structure

Passing asynchronous data from method1 to method2 without impacting the functionality of the script responsible for fetching the asynchronous data in method1

Scrolling content with the mdldialogservice in Angular2

Experimenting with a function that initiates the downloading of a file using jest

Angular efficient approach to changing object properties

Utilizing shared state in React components through props

The symbol displayed on the computer screen representing the software known as Angular 2

Having trouble with loading JavaScript during ng build --prod process

What are the solutions for handling undefined data within the scope of Typescript?

ngx: navigate to the specified URL once the user has been successfully logged in

Showing a dynamically updated array in Angular

Silence in Angular NGRX Effects