Carlos Cifuentes
AngularJS → Angular reference

$interpolateProvider / $interpolate in modern Angular

Custom interpolation symbols are no longer needed, and $interpolate has no runtime equivalent. Templates use {{ }} and strings are built in TypeScript.

Before · AngularJS
app.config(function ($interpolateProvider) {
  $interpolateProvider.startSymbol('[[').endSymbol(']]');
});

<p>[[ vm.user.name ]]</p>

// in a controller
var greet = $interpolate('Hello {{name}}, you have {{count}} messages');
vm.text = greet({ name: user.name, count: 3 });
After · Angular
@Component({
  selector: 'app-greeting',
  template: `<p>{{ text() }}</p>`,
})
export class GreetingComponent {
  user = input.required<User>();
  count = input(0);

  text = computed(
    () => `Hello ${this.user().name}, you have ${this.count()} messages`,
  );
}

What changes

  • Symbols such as [[ ]] existed to avoid a clash with server-side template engines; Angular templates are compiled at build time and never pass through the server engine.
  • $interpolate(text)(context) becomes a template literal, usually inside a computed signal.
  • Formatting that lived inside the interpolated string moves to pipes in the template.

Migration tip. Search for $interpolate and $compile calls whose text comes from the backend or from translation files. Those are runtime templates, and each one needs a decision: a translation library with parameters, or a fixed component.

Related

Planning a migration or a micro-frontend platform?

In a 20-minute call you describe your situation and I tell you how I'd approach it. If it isn't worth doing yet, I'll say so.

Message me on LinkedIn