Angular use lodash in HTML template

Question

Please, could someone tell me how to use Lodash in an Angular HTML template file?

I know how to use it in a component's TypeScript file but not in the component's HTML file.

Thanks

PS This is NOT a dupe of AngularJs: Have Underscore/Lodash/_ in the view template because that relates to AngularJS not Angular.

Answer 1

If you import the module in your TS file, you can assign it to a property of the class and use it in your HTML without any problem.

import * as _ from 'lodash';
...
export class YourClass {
  lodash = _;
  ...
}

---

<p> {{lodash.isEqual(1,1)}} </p>

Answer 2

import * as _ from 'lodash' 

Put _ in a variable and use it in the template is a solution. But if you only want to use only one function from lodash maybe you can have something like

import { isEqual } from 'lodash';

And then put the isEmpty lodash function in a variable instead of the whole lodash library.

Answer 3

import * as _ from "lodash";

@Component({
  ...
})
export class MyComp {
  this._ = _;
}

Answer 4

For better optimisation, import only the required package using lodash-es (npm install lodash-es --save-prod):

import isString from 'lodash-es/isString';
...
export class MyComponent {
  isString = isString;
}