Use different interpolation syntax for Angular data binding

In Angular, you can use interpolation syntax for data binding for an expression as {{ expression}}.

You can use inline expression or member variable inside {{ }} interpolation operator.

Sometimes, you would like to use different interpolation characters instead of {{ }} for data binding. For example [ expession ]. You can configure such setting per Component by specifying interpolation property of @Component decorator.

For example, here is custom interpolation with [ expression ] syntax.

Reserved interpolation characters

You can not use characters matched by below regular expression as an interpolation characters as they are reserved by Angular.

0: /^\s*$/
1: /[<>]/
2: /^[{}]$/
3: /&(#|[a-z])/i
4: /^\/\//

GitHub repository:

ultrasonicsoft/ng-interpolation-demo

Cheers!