angular-expression-parser
This library helps in achieving AngularJs equivalents of $parse, $eval and $watch in Angular.
How to use
Download expression-parser.ts and services.ts in your Angular application.
Register the PipeProvider declared in services.ts with the Application module.
$parse
In your component file implement the below changes
- add the below import statements
import { $parse } from "path_to_expression-parser";
import { PipeProvider } from "path_to_services";- Add the PipeProvider dependency
constructor(private pipeProvider: PipeProvider) {}Arguments to $parse function:
- Expression to be parsed
- PipeProvider
let fn = $parse('(((firstName | uppercase) + lastName) | lowercase) | slice:start:end | uppercase', this.pipeProvider);
This returns a function which can later be excuted with a context.
$eval
The function returned with $parse accepts two arguments
- context
- overrides
example:
class AppComponent implements OnInit{
constructor(public pipeProvider: PipeProvider) {}
ngOnInit() {
this.first = 'Hi';
this.last = "World";
let fn = $parse('first + " " + last | uppercase', this.pipeProvider);
console.log(fn(this)); // logs HI WORLD
console.log(fn(this, {first: 'hello'})); // logs HELLO WORLD
}
}$watch
To achieve $watch like functionality, we need to excute the function returned by $parse in ngDoCheck life cycle method.
example:
class AppComponent implements OnInit, DoCheck{
constructor(public pipeProvider: PipeProvider) {}
ngOnInit() {
this.first = 'Hi';
this.last = "World";
this.watchers = [];
let fn = $parse('first + " " + last | uppercase', this.pipeProvider);
this.watchers.push([fn]);
this.watchers.push([fn, {first: 'hello'}]);
}
ngDoCheck() { // evaluates the parsed functions on each change detection cycle
for (const [fn, locals] of this.watchers) {
console.log(fn(this, locals));
}
}
}