Package Exports

ngx-interpolation

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ngx-interpolation) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Ngx-Interpolation

Ngx-Interpolation is an Angular lightweight library to interprate string interpolation expressions.

Ngx-Interpolation uses Angular string interpolation parser to parse your expressions.

Table of content

Supported Interpolation Expressions
Installation
How to use

Supported Interpolation Expressions

Expression name	Expression syntax
Literal Primitive	'string, number or boolean values'
Literal Array	[1, 'Hello', ['bye'], true]
Literal Map	({key: 'value'})
Binary	1 + 1 * 2
Property Read	prop
Keyed Read	obj['key']
Method Call	method()
Function Call	method()()
Safe Property Read	obj?.prop
Safe Method Call	obj?.method()
Conditional	(expression) ? true : false

Installation

Install Ngx-Interpolation library from the npm command :

npm install ngx-interpolation

⚠️ Currently the Ngx-Interpolation built with Angular 9. Please submit an issue if you encounted any versioning issue.

How to use

Import NgxInterpolation class

import { NgxInterpolation } from 'ngx-interpolation';

Interpolation Expressions

Literal Primitive

Literal Primitive expressions are the string, number and boolean values.

Examples :

let interpolation: NgxInterpolation = new NgxInterpolation();

interpolation.interpolate("{{'Hello world !'}}"); // => Hello world !
interpolation.interpolate("{{100}}"); // => 100
interpolation.interpolate("{{true}}"); // => true

Literal Array

Literal Array expression is simply an array.

Examples :

let interpolation: NgxInterpolation = new NgxInterpolation();

interpolation.interpolate("{{[1, 2.6, 3]}}"); // => 1,2.6,3
interpolation.interpolate("{{[true, 12, 'Alohaaa !', ['Morocco', 1.5]]}}"); // => true,12,Alohaaa !,Morocco,1.5

Literal Map

Literal Map expression is the object defined in the string interpolation expression.

Examples :

let interpolation: NgxInterpolation = new NgxInterpolation();

interpolation.interpolate("{{({key: 100})}}"); // => [object Object]
interpolation.interpolate("{{({key: 100}).key}}"); // => 100

Binary

Binary expression is the Javascript arithmetic operators addition(+), subtraction(-), multiplication(*), and division(/).

Except the expressions that promote side effects, including:

Assignments (=, +=, -=, ...)
Operators such as new, typeof, instanceof, etc.
Chaining expressions with ; or ,
The increment and decrement operators ++ and --
Some of the ES2015+ operators

Examples :

let interpolation: NgxInterpolation = new NgxInterpolation();

interpolation.interpolate("{{1 + 2 * 3}}"); // => 7
interpolation.interpolate("{{(1 + 2) * 3}}"); // => 9
interpolation.interpolate("{{3 + 4 + '5'}}"); // => 75

Property Read

Property Read expression is the property defined in a context given at the second parameter of the interpolate() method.

Examples :

let interpolation: NgxInterpolation = new NgxInterpolation();
let context: any = {
  firstName: 'John',
  lastName: 'Doe',
  wife: {
    fullName: 'Maria Doe'
  }
}  

interpolation.interpolate("Husband: {{firstName}} {{lastName}}", context); // => Husband: John Doe
interpolation.interpolate("Husband: {{firstName + lastName}}", context); // => Husband: JohnDoe
interpolation.interpolate("{{firstName}} is the husband of {{wife.fullName}}", context); // => John is the husband of Maria Doe

Keyed Read

Keyed Read expression is when you read a property from an object via the square brackets.

Examples :

let interpolation: NgxInterpolation = new NgxInterpolation();
let context: any = {
  firstName: 'John',
  lastName: 'Doe',
  wife: {
    fullName: 'Maria Doe'
  }
}

interpolation.interpolate("{{firstName}} is the husband of {{wife['fullName']}}", context); // => John is the husband of Maria Doe

Method Call

Method Call expression is when you call a method from a context given.

Examples :

let interpolation: NgxInterpolation = new NgxInterpolation();
let context: any = {
  firstName: 'John',
  lastName: 'Doe',
  getFullName: function() {
    return `${this.firstName} ${this.lastName}`;
  },
  country: (country)=>{
    return country;
  }
}

interpolation.interpolate("Hello! my name is {{getFullName()}}, I'm from {{country('Morocco')}}", context); // => Hello! my name is John Doe, I'm from Morocco

Function Call

Function Call expression is call function.

Examples :

let interpolation: NgxInterpolation = new NgxInterpolation();
let context: any = {
  methodCall01: ()=>{
    return ()=>{
      return 10;
    }
  },
  methodCall02: ()=>{
    return ()=>{
      return (number)=>{
        return number;
      }
    }
  }
}

interpolation.interpolate("{{methodCall01()()}}", context); // => 10
interpolation.interpolate("{{methodCall01()() + methodCall02()()(20)}}", context); // => 30

Safe Property Read

Safe Property Read expression

Examples :

let interpolation: NgxInterpolation = new NgxInterpolation();
let context: any = {
  prop1: {
    prop2: {
      prop3: {
        prop4: 'Alohaaa !'
      }
    }
  },
  prop5: {
    prop6: {
      prop08: 'Alohaaa !'
    }
  }
}

interpolation.interpolate("{{prop1?.prop2?.prop3?.prop4}}", context); // => Alohaaa !
interpolation.interpolate("{{prop5?.prop6?.prop7.prop8}}", context); // => <RETURNS AN EMPTY STRING>

Safe Method Call

Safe Method Call expression

Examples :

let interpolation: NgxInterpolation = new NgxInterpolation();
let context: any = {
  prop1: {
    method: function(param) {
      return param;
    }
  },
  prop2: null
}

interpolation.interpolate("{{prop1?.method('John Doe')}}", context); // => John Doe
interpolation.interpolate("{{prop2?.method('John Doe')}}", context); // => <RETURNS AN EMPTY STRING>

Conditional

Conditional expression is the ternary condition syntax

Examples :

let interpolation: NgxInterpolation = new NgxInterpolation();
let context: any = {
  firstName: 'John',
  lastName: 'Debik',
}

interpolation.interpolate("{{(firstName === 'John') ? true : false}}", context); // => true
interpolation.interpolate("{{(lastName === 'Doe') ? true : false}}", context); // => false

Custom encapsulation delimiters

There is an optional parametter in the interpolate() method to set your prefered encapsulation delimiters.

Examples :

let interpolation: NgxInterpolation = new NgxInterpolation();
let context: any = {
  firstName: 'John',
  lastName: 'Doe',
}
let interpolationConfig = {
  start: '%',
  end: '%'
}

interpolation.interpolate("%firstName% %lastName%", context, interpolationConfig); // => John Doe