Using ng2-translate within a TypeScript component file

Question

Using ng2-translate within a TypeScript component file

In the home.component.ts file, I have the following code:

notificationId.innerHTML = message

This code displays a message as a notification on the site.

I am trying to figure out how to translate the message and display the translated version on the site. Here is what I have tried:

this.translate.instant(message)
notificationId.innerHTML = message

Unfortunately, this approach did not work. I have all the translations for the messages stored in a json file.

Thank you in advance for any help or suggestions!

json angular typescript

Answer 1

Answer №1

When using the instant method, it is important to ensure that the language package is loaded in order for the translation to work. A better option for translating inside a component's TypeScript file is to use the get method, as you can subscribe to its value. Here is an example:

this.translate.get(message).subscribe(translatedMsg => notificationId.innerHTML = translatedMsg);

However, it is advisable not to use innerHTML. It is recommended to use two-way binding in the template instead, like

<div class="notification">{{notificationMessage}}</div>

, and then implement this variable in the TypeScript file. Also, make sure that you have correctly loaded the language package in the app.module.ts.

Answer 2

When using the instant method, it is important to ensure that the language package is loaded in order for the translation to work. A better option for translating inside a component's TypeScript file is to use the get method, as you can subscribe to its value. Here is an example:

this.translate.get(message).subscribe(translatedMsg => notificationId.innerHTML = translatedMsg);

However, it is advisable not to use innerHTML. It is recommended to use two-way binding in the template instead, like

<div class="notification">{{notificationMessage}}</div>

, and then implement this variable in the TypeScript file. Also, make sure that you have correctly loaded the language package in the app.module.ts.

Using ng2-translate within a TypeScript component file

Answer №1

Similar questions

Creating complex types using Knockout.js observables is a straightforward process

Is there a way to use jq to divide a JSON stream of objects into individual files according to the values of a specific object property?

Ways to resolve the issue of not depending on “@angular/core” and/or “rxjs” in Ionic

Error: Unable to import Scss font file into Angular application

How should one properly handle JSON parsing in PHP?

Instructions on how to retrieve a JSON string from a complex string using a shell script

The compilation time of Webpack and Angular 2

Design an element that stretches across two navigation bars

Transform Jupiter Tessellation (JT) documents into JSON format for display in THREE.js

Identifying the category of a value through a conditional check on another value

How to integrate a static website hosted on an Azure Storage Account into an Asp.net MVC application?

Guide to activating the submit button when a radio button is selected

Sending data from a parent component to a child component via reference

Error in Typescript: 2 arguments were provided instead of the expected 0-1 argument

Is there a way to automatically populate the result input field with the dynamic calculation results from a dynamic calculator in Angular6?

What are the steps to set up ChartJS on a personal computer?

Using ngIf in Angular and eliminating components in Angular 6

Utilizing Mongoose Schema Enums Alongside TypeScript Enums

Extracting data from a JSON object using the BeautifulSoup library

Working with button loops in react.js