#2. How to use Lodash chunk method ( _.chunk() ) with angular 10

Read time : 5 minutes

About Lodash _.chunk(array, [size=n]) Method !

Creates an array of elements split into groups the length of size. If array can't be split evenly, the final chunk will be the remaining elements.

Since :

3.0.0

Arguments :

array (Array): The array to process.
[size=1] (number): The length of each chunk

Returns : 

(Array): Returns the new array of chunks.

Code : 

Step-1 : Create a Angular 10 Project .

If you haven't created an Angular 10 project yet then visit the following link otherwise skip this step.

CLICK HERE TO VISIT.

Step-2 : Integration of Lodash with Angular 10 .

If you haven't integrated Echarts with an Angular 10 project yet then visit the following link otherwise skip this step.

CLICK HERE TO VISIT.

Step-3 : Create Component (Create html , scss and ts file) for Lodash _.Chunk().

Please find the component which I have created for Lodash chunk method .

	<mat-card>
	<div fxLayout="column" fxLayoutGap="1rem">
	<div class="heading">
	<h2 class="badge badge-secondary">_.chunk(array, [size=n])</h2>
	<p>Creates an array of elements split into groups the length of size. If array can't be split evenly, the final
	chunk will be the remaining elements.</p>
	<h2>Since</h2>
	<p>3.0.0</p>
	<h2>Arguments</h2>
	<p>array (Array): The array to process.</p>
	<p>[size=1] (number): The length of each chunk</p>
	<h2>Returns</h2>
	<p>(Array): Returns the new array of chunks.</p>
	<mat-divider></mat-divider>
	</div>
	<div class="body" fxLayout="column" fxLayoutGap="1rem">
	<h3>Try Example : </h3>
	<div fxLayout="row" fxLayout.lt-sm="column" fxLayoutGap="1rem">
	<mat-form-field fxFlex>
	<mat-label>Enter Array value</mat-label>
	<input matInput placeholder="Enter Array value" [(ngModel)]="arrayElement" required="true">
	<mat-hint>separate values by comma to convert value into an array</mat-hint>
	</mat-form-field>
	<mat-form-field fxFlex>
	<mat-label>Enter chunk size</mat-label>
	<input matInput placeholder="Enter Chunk Size" [(ngModel)]="chunkSize" required="true">
	</mat-form-field>
	</div>
	<div>
	<span>Origional Array : {{ getOrigionalArray() | json}}</span>
	</div>
	<div>
	<span>Chunk Array : {{ getChunkArray() | json}}</span>
	</div>
	</div>
	</div>
	</mat-card>

view raw chunk.component.html hosted with ❤ by GitHub

NO CODE CHANGES

view raw chunk.component.scss hosted with ❤ by GitHub

	import { Component, OnInit } from '@angular/core';
	import * as _ from 'lodash';
	@Component({
	selector: 'chunk-component',
	templateUrl: './chunk.component.html',
	styleUrls: ['chunk.component.scss']
	})
	export class ChunkComponent {
	arrayElement: any;
	chunkSize: number = 2;
	getOrigionalArray() {
	if (this.arrayElement && this.arrayElement.length > 0) {
	return this.arrayElement.split(',');
	}
	}
	getChunkArray() {
	if (this.arrayElement && this.arrayElement.length > 0) {
	return _.chunk(this.arrayElement.split(','), this.chunkSize);
	}
	}
	}

view raw chunk.component.ts hosted with ❤ by GitHub

Step-4 : Add entries of components , services etc into module file.

	import { BrowserModule } from '@angular/platform-browser';
	import { NgModule } from '@angular/core';
	import { AppRoutingModule } from './app-routing.module';
	import { AppComponent } from './app.component';
	import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
	import { FormsModule } from '@angular/forms';
	import { HttpClientModule } from "@angular/common/http";
	import { SharedModule } from './common/module/shared.module';
	import { ChunkComponent } from './lodash/array/chunk/chunk.component';
	@NgModule({
	declarations: [
	ChunkComponent
	],
	imports: [
	FormsModule,
	HttpClientModule,
	BrowserModule,
	AppRoutingModule,
	BrowserAnimationsModule,
	SharedModule
	],
	providers: [],
	bootstrap: [AppComponent]
	})
	export class AppModule { }

view raw app.module.ts hosted with ❤ by GitHub

Conclusion : 

This is all about Lodash chunk method , But note this is not the full source code , this is just a major piece of code .

To get the full source code please click on the following link.

Full Source Code

---

See Project Demo : 

https://dorado2041.github.io/lodash-angular-project-deployed

Find Source Code :

https://github.com/dorado2041/lodash-angular-project

For more updates please follow us on :

Twitter      : https://www.twitter.com/dorado2041

Facebook  : https://www.facebook.com/dorado2041

Instagram : https://www.instagram.com/dorado2041

Blogger      : https://doradosolutions.blogspot.com

Youtube      : https://www.youtube.com/channel/UCgATTiSoP15uQL37se2cCpA