When you have a large data set or documents you might want to display this data in an organized, clean, and manageable way, then you need pagination or paging.

This tutorial shows how mat-paginator can be used with Html list.

Prerequisites — Angular, Angular material.

We assume you have an angular app already set up. Next is to add angular material

Install angular material to your angular app, by ng add @angular/material

After installing Angular Material, now we can continue, here is our list before the paginator

list before paginator

Next, import MatPaginatorModule in the angular app module and add it to the…


Array list in JavaScript is resizable, which is handy in a lot of situations. Well, JavaScript provides methods for inserting/appending an element to an array, Array.push(), but we are going to implement a custom append method to insert new elements at the end of our array.

We are going to start by creating a new class, ArrayList, this class has a constructor which accepts one parameter, which can be an empty array.

class ArrayList(){
constructor(items){
this.items=items;
this.size=items.length;
}
}

The next step is to create a getItem, method to access items in the array.

class ArrayList(){
constructor(items){
this.items=items;
this.size=items.length;
}

Collins Kipkemoi

Full Stack Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store