How to Use Lodash in Angular Applications?

Lodash is an open source library that helps in performing operations on various data structures like arrays, or objects, in a seamless and efficient way. When used with javascript frameworks, like angular, it can ease the life of developers while writing functions to manipulate arrays or objects. In this article, we will learn how to use Lodash in angular applications.

Steps to create Angular application

Step 1: Create angular app, and install Lodash

First, create an angular app using the below command:

ng new angular-lodoash
cd angular-lodoash

Next, install the lodash library, and its types:

npm install lodash
npm install @types/lodash --save-dev

The project structure will look like below:

Package.json file:

{
  "name": "angular-lodoash",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^16.2.0",
    "@angular/common": "^16.2.0",
    "@angular/compiler": "^16.2.0",
    "@angular/core": "^16.2.0",
    "@angular/forms": "^16.2.0",
    "@angular/platform-browser": "^16.2.0",
    "@angular/platform-browser-dynamic": "^16.2.0",
    "@angular/router": "^16.2.0",
    "lodash": "^4.17.21",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.13.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^16.2.7",
    "@angular/cli": "^16.2.7",
    "@angular/compiler-cli": "^16.2.0",
    "@types/jasmine": "~4.3.0",
    "@types/lodash": "^4.17.5",
    "jasmine-core": "~4.6.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.1.3"
  }
}

Step 2: Use lodash in an angular component:

In this step, we will use the lodash chuck method to create array chunks, and then display it in the UI.

// Filename: app.component.ts
import { Component } from '@angular/core';
import * as _ from 'lodash';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'angular-lodoash';

    originalArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    chunkedArray = _.chunk(this.originalArray, 3);

    constructor() {
        console.log('App Component Constructor Called');
    }

    ngOnInit() {
        console.log('Original Array:', this.originalArray);
        console.log('Chunked Array:', this.chunkedArray);
    }
}

Step 3: Update template code to show changes in the UI

Now, update the template code to display the chunked array in the UI

// Filename: app.component.html
<div>
    <h3>Chunked Array:</h3>
    <pre>{{ chunkedArray | json}}</pre>
</div>

Step 4: Run the application

Run the application using the below command, and go to http://localhost:4200/

ng serve

Output:

Conclusion

In this article, we learned about Lodash library, and how using it in angular can help developers perform operations on JavaScript objects in a more seamless and efficient way. We also looked at a code example to understand the usage of lodash better.