Angular dynamic string binding

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

Tags:

Angular