CODEWITHSUNDEEP
angularlodash
danday74
danday74

Reputation: 56956

Angular use lodash in HTML template

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.

Upvotes: 3

Views: 7187

Answers (4)

Snook
Snook

Reputation: 174

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;
}

Upvotes: 1

Anto
Anto

Reputation: 125

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.

Upvotes: 4

maxime1992
maxime1992

Reputation: 23793

import * as _ from "lodash";

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

Upvotes: 3

bugs
bugs

Reputation: 15313

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>

Upvotes: 12

Related Questions