Ways to localize alert messages with dynamic content using Angular 5

I'm encountering difficulty translating the notification message with parameters using ngx-translate/core

EXAMPLE CODE

en.json :
   "message": {
        "Successfully removed account": "Successfully removed account"
        }

The translation json above shows how it should be formatted.

constructor(private translate: TranslateService,
private userService : userService)

async deleteAccount(account) {
try {
  await this.userService.removeuserAccount(account.id);
  this.notificationService.sendSuccess(this.translate.instant(`message.Successfully removed account ${account.id}`));
} catch (err) {
  this.notificationService.sendError(this.translate.instant(`message.Unable to delete account: ${err.message}`));
    }
  }

I would appreciate any assistance in resolving this issue.

We are looking for a similar fix to this issue in the following components link: https://github.com/ngx-translate/core/pull/990

javascriptangulartypescriptngx-translate

Answer №1

Check out this response. Convert it and Add it to the Variable.

    constructor(private translate: TranslateService,
    private userService : userService)

    async deleteEntry(entry) {
    try {
      await this.userService.removeUserEntry(entry.id);
      var feedback = this.translate.instant('message.Entry successfully deleted');
this.notificationService.sendSuccess(this.translate.instant(feedback + `${entry.id}`));
    } catch (err) {
var errorStatus = this.translate.instant(`message.Unable to delete entry:');
      this.notificationService.sendError(this.translate.instant(errorStatus +` ${err.message}`));
        }
      }

Answer №2

UPDATE:

To retrieve the message from JSON data, you should utilize the following code:

this.translate.instant(message['Successfully removed account'] + account.id)

PREVIOUS ANSWER:

If message.Successfully is a component variable such as an ENUM, then use 

${message.Successfully} removed account ${account.id}
within backquotes (`) as an argument for the method.

If backquotes are not supported and message.Successfully is simply a string, then use:

this.translate.instant("message.Successfully removed account " + account.id)

If message.Successfully is not a string but a variable, then employ:

this.translate.instant(message.Successfully + "removed account " + account.id)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular button will be disabled if the form control is empty

Is there a way to deactivate the search button when the text box is empty? I attempted to use the "disabled" attribute on the search button, but it didn't work. Here is my HTML code: <div class="col-md-5 pl-0"> <div class="in ...

javascriptangular

When constructing an Ionic 4 project, encountering an error due to the declaration of "name" in the "path" being linked to 2 modules

I attempted to compile my Ionic app using the following commands: ionic cordova platform add browser and then ionic cordova build browser --prod --release However, I encountered an unusual error: You can find my project on GitHub here: https://gi ...

angulartypescriptionic-frameworkbuildionic4

Adding a .PHP File to Two Separate DIVs

I am using wordpress to create a custom theme. I'm interested in placing all the content from my slider.php file inside a div box on my index.php page. How would I go about doing this? SLIDER.PHP <div class="slider"> // All the image tags wit ...

javascriptphpjqueryhtmlcss

An index problem with BufferGeometry

Trying to transition code from openFrameworks to THREE.JS for generating a landscape with Perlin noise. The approach involves creating a static index array first, followed by positioning vertices in a square grid, each offset by a specific distance. This s ...

javascriptopengl-esthree.jsbuffer-geometry

What is the best way to ensure my jQuery plugin is up to date?

I have a question regarding the functionality of this plugin I am using. My goal is to update the timer it provides. To start the countdown timer with 5000 milliseconds remaining, I use the following code: $('#CountdownTimer').countdown({ remai ...

javascriptjquerycountdown

No data provided in nested parameters for Ajax post request

I am attempting to send an Ajax request to my rails controller using Ajax. $.ajax({ url: '/vulnerabilities/export', type: 'GET', processData: false, data: {export: {ids: this.refs.table.state.selectedRowKeys }} }); When there ...

javascriptjqueryruby-on-railsajax

Vue.js 2 components encountering issue with parent-child relationship due to undefined item

I recently started working with Vue and encountered the error referenceError: items is not defined. Can anyone help me figure out why this error is occurring or provide some guidance? Upon initial inspection of the code, it seems like the issue may be rel ...

javascriptvue.jsvuejs2vue-component

Tips for refreshing views with Angular JS

I am looking to refresh all the views displayed on my page. The layout consists of a Header, Footer, and Body view. Within the Header view, there is a dropdown menu where users can choose their preferred language. Upon selecting a language, I want all the ...

javascriptjqueryangularjs

The click event fails to provide $event upon being clicked

Within my HTML structure in an angular 7 application, I have the following setup: My goal is to trigger the GetContent() function when any text inside the div is clicked. Strangely, when clicking on the actual text, $event captures "Liquidity" correctly. ...

javascripthtmlangular

Using CanActivateGuard with Data Transfer to the Guard

In my angular app, I have integrated an authentication guard to handle user access. The app consists of different modules, each utilizing a factory to create a unique ThemeService. These modules are self-contained applications with distinct styles and secu ...

angularangular-router-guards

Issues arise when attempting to manipulate the DOM with ng-view in AngularJS

Apologies for not providing the code due to its length. I have a simple application with a single module, controller, and ng-view/routProvider. In my controller, when I use console.log(angular.element('div').length), it correctly shows that ther ...

javascriptjqueryhtmlangularjsdom

A guide to entering information into an input field with JavaScript for logging in successfully

https://i.stack.imgur.com/TF51Z.gif https://i.stack.imgur.com/HHsax.png https://i.stack.imgur.com/HUztt.png When attempting to input text using document.getelement('').value="" , it doesn't behave as expected. The text disappear ...

javascripthtmljquerycssajax

Connecting Vue.js components together

I have two separate components - one for viewing data and another for editing the same data. The viewing component contains labels and paragraphs, while the editing component includes inputs and textareas. Both components are fed the same data object. Is ...

javascriptvue.jsvue-component

How should I set up my TestBed configuration in Jasmine test scenarios within an Angular environment?

As I begin writing test cases for Angular, I've come across various ways to configure my TestBed by reading articles online. Here are a few examples: Example 1: beforeEach(async(() => { TestBed.configureTestingModule({ ... }).compileCompone ...

angularjasminetestbed

How can I retrieve query parameters passed from an Angular application in PHP?

I'm trying to figure out how to retrieve data from query parameters sent by an Angular application in PHP. Unfortunately, I don't have much experience with PHP. Is there anyone willing to lend a hand? ...

phpangular

Tips on retrieving a strongly typed value from a method using Map<string, object>

Having had experience working with C# for a while, I recently ventured into a Node.js project using TypeScript V3.1.6. It was exciting to discover that TypeScript now supports generics, something I thought I would miss from my C# days. In my C# code, I ha ...

typescript

What is the best approach to implementing self-referencing type validation in TypeScript?

I am working on creating a specific type that guarantees all fields listed in the requiredFields array are included in the defaults object. The goal is to have defaults trigger type errors if any of the names from requiredFields are missing, and if the va ...

typescript

Deprecated as it may be, I am still determined to add an array of routes to my Vue router

In my Main.js file, I am currently fetching routes from the database using an API call. However, I've run into an issue with Vue router version 4 deprecating the addRoutes functionality. Now, I can only add one route at a time which is not ideal for m ...

javascriptvue.jsroutesvue-routervue-router4

Develop three.js elements using the map function

A function was created using react-three-fiber to display a butterfly loaded from a glb file with animation. The butterfly is enclosed in a primitive object passed as a prop. The structure is as follows: the butterfly is nested in a mesh, which is nested i ...

javascriptreactjsthree.jsreact-three-fiber

Executing a post request using axios

Having some trouble with a post request using axios and it's refusing to cooperate. Here is the specific request I need to make. This is what I attempted: await axios.post( 'https://api.searchads.apple.com/api/v4/campaigns/XXXX/adgroups/targ ...

javascriptnode.jsaxios