What is the best way to combine two messages in the Global Message Service within an Angular application?

In a particular scenario, I am faced with the need to combine two error messages - one from a backend response and the other being a localized and translated text.

The code snippet in question is as follows:

   this.globalMessageService.add(
      { key: 'httpHandlers.internalServerError.exception'},
      // errors[0].message,
      GlobalMessageType.MSG_TYPE_ERROR
    );

The issue I am encountering is the difficulty in merging the errors[0].message string with the localized text. When using the + operator, the value from the current key is converted to a string, resulting in the localized text not being displayed.

I am open to any suggestions or advice on how to approach this problem!

angulartypescriptspartacus-storefront

Answer №1

In case someone else encounters this issue, a possible solution might be:

this.errorMessageService.include(
  {
    title: 'httpHandlers.internalServerError.exception',
    data: { problem: errors[0].message },
  },
  GlobalMessageType.MSG_TYPE_ERROR
);

Make sure to also incorporate problem into the translation sections like so:

internalServerError: {
  exception: 'random text to translate: {{ problem }}',
},

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

"The issue persists in Angular 5 - I am using ngOnInit to fetch my object from firestore, but surprisingly the view does not reflect any

After working with Angular 5 and Firestore, I encountered an interesting issue. When retrieving my document and checking it using console.log(this.assets) in ngOnInit(), everything seems fine. However, a strange thing happens during a page reload: if I qui ...

angularangular5

Is there a way in Typescript to determine the type of a union type when a specific condition is satisfied?

I am faced with a scenario where I have an object that can take on two different shapes: {ageTop:42} or {locations: [{name:Myrtle Beach}]} These objects are passed as parameters to a function, and I want to ensure that the function only receives the t ...

typescript

Issues with Angular application navigation in live environment

While my website functions perfectly on the development server, I encounter a strange error when I publish it to production on GitHub pages. Visiting the URL (yanshuf0.github.io/portfolio) displays the page without any issues. However, if I try to access y ...

javascriptangulartypescript

I'm in need of someone who can listen and detect any changes in my notifications table (node) in order to perform real-time data

Seeking a listener in Firebase to track changes in my notifications table for real-time data monitoring. My project is utilizing Angular 2 with TypeScript and Firebase. ...

typescriptfirebaseangular

The error message "NextFunction does not have the property 'render'" appears when using Angular Universal in conjunction with Express

When attempting to implement server-side rendering for my Angular 6 app, I encountered the following error while using the Angular CLI universal demo as a reference: Property 'render' does not exist on type 'NextFunction'. This is the ...

angularexpresswebpackangular-universal

What is the method for adjusting the border color of an ng-select component to red?

I am having an issue with the select component in my Angular HTML template. It is currently displaying in grey color, but I would like it to have a red border instead. I have tried using custom CSS, but I haven't been able to achieve the desired resul ...

angularcssbootstrap-4angular-ngselect

Developing a custom functionality to retrieve a server cookie for authentication in NextJS version 14

I am in the process of incorporating an email address verification feature for users registering on my NextJS website with a WordPress installation as a headless CMS. Here's what I plan to do: Set a server token with the following value {id: <use ...

typescriptnext.jscookiesapp-routernextjs-api-router

Executing TypeScript functions in a sequential order within an Angular2 environment

Here is a Typescript function I have written: AdjustSpinAndGetAmbiguityAnalysisResult() { this.cssRefreshSpin = "glyphicon glyphicon-refresh glyphicon-spin"; this.GetAmbiguityAnalysisResult(); this.cssRefreshSpin = "glyphicon glyph ...

angulartypescript

The 'flatMap' property is not found on the 'string[]' data type. This issue is not related to ES2019

A StackBlitz example that I have set up is failing to compile due to the usage of flatMap. The error message reads: Property 'flatMap' does not exist on type 'string[]'. Do you need to change your target library? Try changing the ' ...

angulartypescriptecmascript-2019

React TypeScript error: Cannot access property "x" on object of type 'A | B'

Just starting out with react typescript and I've encountered the following typescript error when creating components: interface APIResponseA { a:string[]; b:number; c: string | null; // <- } interface APIResponseB { a:string[] | null; b:number; d: ...

reactjstypescript

Trouble with storing data in Angular Reactive Form

During my work on a project involving reactive forms, I encountered an issue with form submission. I had implemented a 'Submit' button that should submit the form upon clicking. Additionally, there was an anchor tag that, when clicked, added new ...

javascriptangulartypescriptangular-reactive-formsangular2-form-validation

There are no HTTP methods being exported in this specific file. Remember to export a named export for each individual HTTP method

Currently, I am working on a React.js/Next.js project that incorporates Google reCAPTCHA. The frontend appears to be functioning properly as I have implemented print statements throughout the code. However, I am encountering an error in the backend display ...

javascriptreactjstypescriptnext.js

The program experienced an issue with TypeError: Attempting to access properties of an undefined variable ('_id')

I am attempting to show a data entry (with a unique id) in Angular, but I'm encountering the following error: ERROR TypeError: Cannot read properties of undefined (reading '_id') The service for retrieving the specific id is defined as: g ...

node.jsangulartypescriptmean-stack

Having trouble with Angular Ng2-file-Upload's Upload.all() method not successfully sending files to the API

Dealing with the challenge of uploading files in mp4 and jpg formats, I have set up 2 separate instances of FileUploader with custom validation. Upon clicking the upload button, I attempt to merge the files from both instances into a single FileUploader ...

angulartypescriptangular-file-uploadng2-file-upload

Is it possible to create a class object with properties directly from the constructor, without needing to cast a custom constructor signature

class __Constants__ { [key: string]: string; constructor(values: string[]) { values.forEach((key) => { this[key] = key; }); } } const Constants = __Constants__ as { new <T extends readonly string[]>(values: T): { [k in T[num ...

typescriptmapped-types

How can I ensure my function waits for a promise to be resolved using Async / Await?

I'm running into an issue where I want my function to keep executing until the nextPageToken is null. The problem occurs when the function runs for the first time, it waits for the promise to resolve. However, if there is a nextPageToken present in th ...

javascripttypescriptasynchronousasync-await

Issue: ALERT found in ./src/styles.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib?

Hello to all my fellow developers! I've been diving into the Angular 6 project recently and things are going smoothly for the most part. However, I keep encountering a warning in the console after running the application with (ng serve). WARNING i ...

angularangular-cli

Issue encountered when attempting to convert Angular application to Angular Universal

While attempting to convert my Angular App into Angular Universal, I encountered an issue. I used the command "ng add @nguniversal/express-engine --clientProject my-app" An error occurred: Module not found - '@schematics/angular/utility/json-file&apo ...

angular

What is the best way to define an event binding statement in the Angular code rather than within the template?

Is it possible to define the event binding statement directly in the code (rather than in the template)? I am trying to dynamically create a menu, and while I can achieve this with routes (since they are strings), using event names seems to be more challe ...

angular

Utilizing Angular 2 for Integration of Google Calendar API

I recently attempted to integrate the Google Calendar API with Angular 2 in order to display upcoming events on a web application I am developing. Following the Google Calendar JavaScript quick-start tutorial, I successfully managed to set up the API, inse ...

javascriptangulartypescriptgoogle-apigoogle-calendar-api