Angular dynamic string binding

Question

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

can you please explain but facing difficult when dynamic values in string occurs means what error you get? — jitender
– jitender, Commented Oct 31, 2019 at 12:22
@jitender in HTML am receiving like 'You have created {{count}} users' but I want like 'You have created 10 users' — Prabhakaran
– Prabhakaran, Commented Oct 31, 2019 at 12:25

yazantahhan · Accepted Answer · 2019-10-31 13:03:54Z

4

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

answered Oct 31, 2019 at 13:03

yazantahhan

3,1101 gold badge16 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

danday74 Over a year ago

very helpful answer, especially the regex!

Ling Vu · Accepted Answer · 2019-10-31 14:16:02Z

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}}"
}

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>

answered Oct 31, 2019 at 14:16

Ling Vu

5,1896 gold badges28 silver badges49 bronze badges

2 Comments

Prabhakaran Over a year ago

It would be more helpful, if more details provided.

Ling Vu Over a year ago

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.

jitender · Accepted Answer · 2019-10-31 12:43:17Z

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

answered Oct 31, 2019 at 12:43

jitender

10.4k1 gold badge21 silver badges49 bronze badges

Comments

Athanasios Kataras · Accepted Answer · 2019-10-31 12:44:39Z

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

answered Oct 31, 2019 at 12:44

Athanasios Kataras

26.7k5 gold badges40 silver badges67 bronze badges

4 Comments

Ling Vu Over a year ago

But SuccessMessage is now more like a function instead of a constant. Isn't it?

Athanasios Kataras Over a year ago

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.

Ling Vu Over a year ago

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

Athanasios Kataras Over a year ago

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.

Collectives™ on Stack Overflow

Angular dynamic string binding

4 Answers 4

1 Comment

What do you need to do?

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

2. Define the translations/string constants

2 Comments

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

What do you need to do?

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

2. Define the translations/string constants

2 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related