7

I am trying to implement one standard where all string files are from separate constant files. Everything works great, but facing difficult when dynamic values in string occurs. Kindly help me how to use the constants.

constant.ts 

export enum testPageConstants {
   SuccessMessage = 'You have created {{count}} users'
}

userPage.ts

export class UserPage {
   import {testPageConstants} from '...';
   constantUIBind: typeof testPageConstants;
   count = 10;

   constructor() {
       this.constantUIBind = testPageConstants;
   }
}

userPage.html 

<p> {{constantUIBind.SuccessMessage}}</p>

Output: In HTML am receiving like 'You have created {{count}} users' but I want like 'You have created 10 users

Prabhakaran
  • 1,524
  • 2
  • 13
  • 21

4 Answers4

3

Another option is to create a pipe that will interpolate the string for you.

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
  name: "interpolate"
})
export class InterpolatePipe implements PipeTransform {
  transform(value: any, args: any) {
    value = value.replace(/{{([^}}]+)?}}/g, ($1, $2) =>
      $2.split(".").reduce((p, c) => (p ? p[c] : ""), args)
    );
    return value;
  }
}

and in the template:

<p>{{constantUIBind.SuccessMessage | interpolate:this}}</p>

The limitation here is that it can't interpolate objects like test.test

You can check the stackblitz here.

Inspiration from: https://stackoverflow.com/a/45235190/5613720

yazantahhan
  • 2,950
  • 1
  • 13
  • 16
1

I am not sure if that is possible using enums though one possible workaround could be yby wrapping your literals into functions so change your enum to class like

 class testPageConstants {
     static  SuccessMessage = (count)=>`You have created ${count} users`
  }

then create a function to render like 

 render(template, data) {
       return template(data);
   }

then on ui

<p> {{render(constantUIBind.SuccessMessage,count)}}</p>

demo

jitender
  • 10,238
  • 1
  • 18
  • 44
1

For this you usually use the TranslateService, where you define several strings through out your application. Later you can use it like that and have the functionality to add parameters to it like:

<div>{{ 'SuccessMessage' | translate:param }}</div>

SuccessMessage is your constant to get from a dictionary and param is the parameter like you mentioned.

What do you need to do?

1. Install Ngx Translate and init the TranslateService for your application

2. Define the translations/string constants

Once you've imported the TranslateModule, you can put your translations in a json file that will be imported with the TranslateHttpLoader. The following translations should be stored in en.json.

{
    "HELLO": "hello {{value}}"
}
  1. Use the service, the pipe or the directive
    • With the service, it looks like this:
translate.get('HELLO', {value: 'world'}).subscribe((res: string) => {
    console.log(res);
    //=> 'hello world'
});
  • This is how you do it with the pipe:
<div>{{ 'HELLO' | translate:{value: 'world'} }}</div>
Ling Vu
  • 4,740
  • 5
  • 24
  • 45
  • It would be more helpful, if more details provided. – Prabhakaran Oct 31 '19 at 14:39
  • More details on what? In the end you have then a file, full of constants, which you can use through your whole application, which I currently use for very big scaling applications. – Ling Vu Oct 31 '19 at 14:53
0

Would the following work for you?

import { Component } from '@angular/core';

export class TestPageConstants {
   static SuccessMessage = (count) => { return `You have created ${count} users`};
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
   constantUIBind: typeof TestPageConstants;
   count = 10;

   constructor() {
       this.constantUIBind = TestPageConstants;
   }
}

UI 

<p> {{constantUIBind.SuccessMessage(count)}}</p>

Check stackblitz here

Athanasios Kataras
  • 25,191
  • 4
  • 32
  • 61
  • But SuccessMessage is now more like a function instead of a constant. Isn't it? – Ling Vu Oct 31 '19 at 14:17
  • It is. There is no way that I can think to do it otherwise. Even with your solution with the translations it's the same thing. A function is called in the form of a pipe. – Athanasios Kataras Oct 31 '19 at 14:23
  • But this is a solution which scales. Yours not. What if you want to add another string. Than you need to create one more function. That's not how separation of concerns works – Ling Vu Oct 31 '19 at 14:51
  • How does separation of concerns come into play here? Which concerns are not separated? How does it not scale? Please explain this to me in a better way. I would agree that the naming could be better though. Maybe it will be changed. – Athanasios Kataras Oct 31 '19 at 15:13