CODEWITHSUNDEEP
angularinternationalizationjhipsteralert
ROBlackSnail
ROBlackSnail

Reputation: 541

Jhipster - add translation for new alerts

In order to add a new alert when a user clicks a button, I followed the instructions from the jhipster official website on the section about the Notification System .

The function that executes when the user clicks the button looks like this now :

 randomMethod():void {
     this.alertService.get().push(
      this.alertService.addAlert(
          {
              type: 'danger',
              msg: 'you should not have pressed this button!',
              timeout: 3000,
              toast: false,
              scoped: true
          },
          this.alertService.get()
      )

  );

The new alert does display but, because I have internationalization enabled, my alert-message is displayed like this:

translation-not-found[you should not have pressed this button!]

What do I need to do to configure the translation for my alert ?

EDIT : it think I need to modify one or more files in my src\main\webapp\i18n folder

Upvotes: 1

Views: 1444

Answers (1)

ROBlackSnail
ROBlackSnail

Reputation: 541

Like @GaëlMarziou answered in the comments of the question :

If you have internationalization enabled in your project, in the msg property you will NOT introduce the message itself. Instead, you will have to provide a key that points towards a file in src\main\webapp\i18n matching the language, key and page.

For example, if you want to put an alert in the home page and you have chosen, among others, English as a language, you will have to do something like this :

  randomMethod():void {
     this.alertService.get().push(
      this.alertService.addAlert(
          {
              type: 'danger',
              msg: 'yourAppName.home.buttonAllertMessage',
              timeout: 3000,
              toast: false,
              scoped: true
          },
          this.alertService.get()
      )
  );

And you will have to add the new property (buttonAllertMessage) in the src\main\webapp\i18n\en\home.json file like so :

{
  "home": {
    "title": "Welcome",
    "subtitle": "This is your homepage",
    "logged": {
      "message": "You are logged in as user \"{{username}}\"."
    },
    "question": "If you have any question on JHipster:",
    "link": {
      "homepage": "JHipster homepage",
      "stackoverflow": "JHipster on Stack Overflow",
      "bugtracker": "JHipster bug tracker",
      "chat": "JHipster public chat room",
      "follow": "follow @jhipster on Twitter"
    },
    "like": "If you like JHipster, don't forget to give us a star on",
    "github": "GitHub",
    "buttonAllertMessage" : "you should not have pressed this button!"
  }
}

And then you should do the same for the other languages you have configured.

Upvotes: 1

Related Questions