Most Popular Angular Component Libraries

Table of Content

What is a Component Library?
Best Angular Component Libraries
Conclusion

Angular is an open-source framework maintained by Google (the Google Angular team). It is a complete framework that includes the necessary components and recommended best practices. As with React and Vue, Angular supports modules, letting you divide your UI into distinct and reusable components.

In the following post, we’ll look for some notable and helpful Angular component libraries to explore when building your next Angular applications. If you are looking for a reliable partner for your Angular projects, consider collaborating with an experienced Angular development company.

1. What is a Component Library?

A component library is a collection of reusable web or system components. Developers can integrate these prebuilt components into mobile or web applications, reducing the need to write code from scratch.

When implemented successfully, it enables developers to work consistently and become more time-productive. Many UI component libraries also offer customization options, allowing engineers to extend, modify, or create new components.

Additionally, component libraries improve team communication. When working on a large product with many team members, a component library helps manage multiple versions and maintain consistency across the application.

2. Best Angular Component Libraries

Below is a list of some of the most useful component libraries for Angular development.

2.1 Angular Material

Angular Material (previously referred to as Material2) is an official Angular component library that adheres to Google’s Material Design guidelines. It is built with Typescript and Angular. The library includes a variety of components and features that developers can use in web apps. It also provides tools that enable any programmer to create custom components that use well-known interaction patterns and styles.

Angular Material is one of the most popular libraries for Angular. Using its command-line schematics, developers can quickly add new features and generate custom components that follow common interaction patterns. It helps ensure a consistent, smooth user experience across multiple platforms and operating systems, including macOS, Windows, Android, iOS, and Chrome OS. This library is well-organized and well-documented, and it is widely used by programmers worldwide.

Features of Angular Material:

Responsive design
Comprehensive suite of UI components
Conventional CSS
Dynamic theming capabilities

Some of the Angular Material UI Components:

Autocomplete
Checkbox
Datepicker
Snackbar
Stepper
Paginator

Installation:

You can use Yarn or NPM to install Angular Material. The commands for them are as follows:

// with npm
npm i @angular/material
 
// with yarn
yarn add @angular/material

Usage of Angular Material:

1. Create new project “angular-material-examples” using the command below:

ng new angular-material-examples 
 
cd .\angular-material-examples\

2. Install Angular Material

ng add @angular/material

3. Create a new interface

ng generate interface interfaces/user-data

user-data.ts

export interface UserData { 
 id: number; 
 firstName: string; 
 lastName: string; 
 email: string; 
}

4. Create a new component

ng generate component material-table

4.1 material-table.component.html

<mat-toolbar> 
	<span>Material Table</span> 
</mat-toolbar> 
<div class="mat-elevation-z8 data-table"> 
	<mat-form-field class="filter-input"> 
    	<input matInput (keyup)="applyFilter($event)" placeholder="Filter"> 
	</mat-form-field> 
	<table mat-table [dataSource]="dataSource" matSort> 
    	<!-- id Column --> 
    	<ng-container matColumnDef="id"> 
        	<th mat-header-cell *matHeaderCellDef mat-sort-header> No. </th> 
        	<td mat-cell *matCellDef="let element"> {{element.id}} </td> 
    	</ng-container> 
 
    	<!-- First Name Column --> 
    	<ng-container matColumnDef="firstName"> 
        	<th mat-header-cell *matHeaderCellDef mat-sort-header> First Name </th> 
        	<td mat-cell *matCellDef="let element"> {{element.firstName}} </td> 
    	</ng-container> 
 
    	<!-- Last Name Column --> 
    	<ng-container matColumnDef="lastName"> 
        	<th mat-header-cell *matHeaderCellDef mat-sort-header> Last Name </th> 
        	<td mat-cell *matCellDef="let element"> {{element.lastName}} </td> 
    	</ng-container> 
 
    	<!-- Email Column --> 
    	<ng-container matColumnDef="email"> 
        	<th mat-header-cell *matHeaderCellDef mat-sort-header> Email </th> 
        	<td mat-cell *matCellDef="let element"> {{element.email}} </td> 
    	</ng-container> 
 
    	<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> 
    	<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> 
	</table> 
	<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons aria-label="Select page of User Data"> 
	</mat-paginator> 
</div>

4.2 material-table.component.scss

.data-table {  
	width: 90%; 
	margin: 5% auto; 
} 
.filter-input{ 
	width: 100%; 
}

4.3 material-table.component.ts

import { AfterViewInit, Component, ViewChild } from '@angular/core'; 
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator'; 
import { MatTableDataSource, MatTableModule } from '@angular/material/table'; 
import { UserData } from '../interfaces/user-data'; 
import { MatSort, MatSortModule } from '@angular/material/sort'; 
import { CommonModule } from '@angular/common'; 
import { MatToolbarModule } from '@angular/material/toolbar'; 
import { MatInputModule } from '@angular/material/input'; 
 
@Component({ 
  selector: 'app-material-table', 
  standalone: true, 
  imports: [CommonModule, MatTableModule, MatPaginatorModule, MatToolbarModule, MatSortModule, MatInputModule], 
  templateUrl: './material-table.component.html', 
  styleUrls: ['./material-table.component.scss'] 
}) 
export class MaterialTableComponent implements AfterViewInit { 
  @ViewChild(MatPaginator) paginator!: MatPaginator; 
  @ViewChild(MatSort) sort!: MatSort; 
 
  userData: UserData[] = [ 
	{ id: 1, firstName: "James", lastName: "Butt", email: "jbutt@gmail.com" }, 
	{ id: 2, firstName: "Josephine", lastName: "Darakjy", email: "josephine_darakjy@darakjy.org" }, 
	{ id: 3, firstName: "Art", lastName: "Venere", email: "art@venere.org" }, 
	{ id: 4, firstName: "Lenna", lastName: "Paprocki", email: "lpaprocki@hotmail.com" }, 
	{ id: 5, firstName: "Donette", lastName: "Foller", email: "donette.foller@cox.net" }, 
	{ id: 5, firstName: "Simona", lastName: "Morasca", email: "simona@morasca.com" }, 
	{ id: 7, firstName: "Mitsue", lastName: "Tollner", email: "mitsue_tollner@yahoo.com" }, 
	{ id: 8, firstName: "Leota", lastName: "Dilliard", email: "leota@hotmail.com" }, 
	{ id: 9, firstName: "Sage", lastName: "Wieser", email: "sage_wieser@cox.net" }, 
	{ id: 10, firstName: "Kris", lastName: "Marrier", email: "kris@gmail.com" }, 
	{ id: 11, firstName: "Minna", lastName: "Amigon", email: "minna_amigon@yahoo.com" }, 
	{ id: 12, firstName: "Abel", lastName: "Maclead", email: "amaclead@gmail.com" }, 
	{ id: 13, firstName: "Kiley", lastName: "Caldarera", email: "kiley.caldarera@aol.com" }, 
	{ id: 14, firstName: "Graciela", lastName: "Ruta", email: "gruta@cox.net" }, 
	{ id: 15, firstName: "Cammy", lastName: "Albares", email: "calbares@gmail.com" }, 
	{ id: 16, firstName: "Mattie", lastName: "Poquette", email: "mattie@aol.com" }, 
	{ id: 17, firstName: "Meaghan", lastName: "Garufi", email: "meaghan@hotmail.com" }, 
	{ id: 18, firstName: "Gladys", lastName: "Rim", email: "gladys.rim@rim.org" }, 
	{ id: 19, firstName: "Yuki", lastName: "Whobrey", email: "yuki_whobrey@aol.com" }, 
	{ id: 20, firstName: "Fletcher", lastName: "Flosi", email: "fletcher.flosi@yahoo.com" } 
  ]; 
  displayedColumns: string[] = ['id', 'firstName', 'lastName', 'email']; 
  dataSource = new MatTableDataSource<UserData>(this.userData); 
 
  ngAfterViewInit() { 
	this.dataSource.paginator = this.paginator; 
	this.dataSource.sort = this.sort; 
  } 
 
  applyFilter(event: Event) { 
	let value = (event.target as HTMLInputElement).value; 
	this.dataSource.filter = value.trim().toLowerCase(); 
  } 
}

import { AfterViewInit, Component, ViewChild } from '@angular/core'; import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator'; import { MatTableDataSource, MatTableModule } from '@angular/material/table'; import { UserData } from '../interfaces/user-data'; import { MatSort, MatSortModule } from '@angular/material/sort'; import { CommonModule } from '@angular/common'; import { MatToolbarModule } from '@angular/material/toolbar'; import { MatInputModule } from '@angular/material/input'; @Component({ selector: 'app-material-table', standalone: true, imports: [CommonModule, MatTableModule, MatPaginatorModule, MatToolbarModule, MatSortModule, MatInputModule], templateUrl: './material-table.component.html', styleUrls: ['./material-table.component.scss'] }) export class MaterialTableComponent implements AfterViewInit { @ViewChild(MatPaginator) paginator!: MatPaginator; @ViewChild(MatSort) sort!: MatSort; userData: UserData[] = [ { id: 1, firstName: "James", lastName: "Butt", email: "jbutt@gmail.com" }, { id: 2, firstName: "Josephine", lastName: "Darakjy", email: "josephine_darakjy@darakjy.org" }, { id: 3, firstName: "Art", lastName: "Venere", email: "art@venere.org" }, { id: 4, firstName: "Lenna", lastName: "Paprocki", email: "lpaprocki@hotmail.com" }, { id: 5, firstName: "Donette", lastName: "Foller", email: "donette.foller@cox.net" }, { id: 5, firstName: "Simona", lastName: "Morasca", email: "simona@morasca.com" }, { id: 7, firstName: "Mitsue", lastName: "Tollner", email: "mitsue_tollner@yahoo.com" }, { id: 8, firstName: "Leota", lastName: "Dilliard", email: "leota@hotmail.com" }, { id: 9, firstName: "Sage", lastName: "Wieser", email: "sage_wieser@cox.net" }, { id: 10, firstName: "Kris", lastName: "Marrier", email: "kris@gmail.com" }, { id: 11, firstName: "Minna", lastName: "Amigon", email: "minna_amigon@yahoo.com" }, { id: 12, firstName: "Abel", lastName: "Maclead", email: "amaclead@gmail.com" }, { id: 13, firstName: "Kiley", lastName: "Caldarera", email: "kiley.caldarera@aol.com" }, { id: 14, firstName: "Graciela", lastName: "Ruta", email: "gruta@cox.net" }, { id: 15, firstName: "Cammy", lastName: "Albares", email: "calbares@gmail.com" }, { id: 16, firstName: "Mattie", lastName: "Poquette", email: "mattie@aol.com" }, { id: 17, firstName: "Meaghan", lastName: "Garufi", email: "meaghan@hotmail.com" }, { id: 18, firstName: "Gladys", lastName: "Rim", email: "gladys.rim@rim.org" }, { id: 19, firstName: "Yuki", lastName: "Whobrey", email: "yuki_whobrey@aol.com" }, { id: 20, firstName: "Fletcher", lastName: "Flosi", email: "fletcher.flosi@yahoo.com" } ]; displayedColumns: string[] = ['id', 'firstName', 'lastName', 'email']; dataSource = new MatTableDataSource<UserData>(this.userData); ngAfterViewInit() { this.dataSource.paginator = this.paginator; this.dataSource.sort = this.sort; } applyFilter(event: Event) { let value = (event.target as HTMLInputElement).value; this.dataSource.filter = value.trim().toLowerCase(); } }

5. Route configuration within the ‘app-routing.module.ts’ file.

import { NgModule } from '@angular/core'; 
import { RouterModule, Routes } from '@angular/router'; 
import { MaterialTableComponent } from './material-table/material-table.component'; 
 
const routes: Routes = [ 
  { path: '', pathMatch: 'full', redirectTo: 'material-table' }, 
  { path: 'material-table', component: MaterialTableComponent } 
]; 
 
@NgModule({ 
  imports: [RouterModule.forRoot(routes)], 
  exports: [RouterModule] 
}) 
export class AppRoutingModule { }

Folder Structure

Output – UI images

2.2 NG-BootStrap

In 2015, there was an introduction to NG-bootstrap as a new UI, which later became one of the best Angular UI libraries. NG Bootstrap provides Angular widgets and advanced input components implemented from scratch using Bootstrap 4 CSS. These widgets are simple to use and require no knowledge beyond Angular and Bootstrap. The component package is easy to manage and has no third-party JavaScript dependencies. This library has strong support from a large development community.

A similar library is NGX- Bootstrap. The main differences are versioning and the level of support for native Angular components.

NG Bootstrap Features:

Lightweight footprint
A suite of directives specifically for Bootstrap components
Advanced components and input controls
Bootstrap UI elements implemented for Angular

Some of the NG Bootstrap Components:

Dropdown
Modals
Navigation menus
Badges
Carousel
Forms
Alerts

Installation:

You can execute the following commands in Yarn or NPM for installing NG Bootstrap;

// with npm
npm i @ng-bootstrap/ng-bootstrap 
 
// with yarn
yarn add @ng-bootstrap/ng-bootstrap

Usage of NG Bootstrap:

1. Create a new project “angular-ng-bootstrap-examples” using the command below:

ng new angular-ng-bootstrap-examples 
 
cd .\angular-ng-bootstrap-examples\

2. Install ng-bootstrap

ng add @ng-bootstrap/ng-bootstrap

3. Create a new interface

ng generate interface interfaces/user-data

user-data.ts

export interface UserData { 
 id?: number; 
 firstName: string; 
 lastName: string; 
 email: string; 
}

4. Create a new component

ng generate component ng-table

4.1 ng-table.component.html

<ul ngbNav #nav="ngbNav" class="nav-tabs"> 
	<li ngbNavItem> 
    	<button ngbNavLink>NG Table</button> 
    	<ng-template ngbNavContent> 
        	<table class="table table-striped data-table"> 
            	<thead> 
                	<tr> 
                    	<th scope="col">#</th> 
                    	<th scope="col" sortable="firstName">First Name</th> 
                    	<th scope="col" sortable="lastName">Last Name</th> 
                    	<th scope="col" sortable="email">Email</th> 
                	</tr> 
            	</thead> 
            	<tbody> 
                	<tr *ngFor="let data of dataList"> 
                    	<th scope="row">{{ data.id }}</th> 
                    	<td>{{data.firstName}}</td> 
                    	<td>{{data.lastName}}</td> 
                    	<td>{{data.email}}</td> 
                	</tr> 
            	</tbody> 
        	</table> 
        	<div class="d-flex justify-content-between p-2"> 
            	<ngb-pagination [collectionSize]="total" [(page)]="page" [pageSize]="pageSize" 
                	(pageChange)="filterData()"> 
            	</ngb-pagination> 
 
            	<select class="form-select" style="width: auto" [(ngModel)]="pageSize" (ngModelChange)="filterData()"> 
                	<option [ngValue]="5">5 items per page</option> 
                	<option [ngValue]="10">10 items per page</option> 
                	<option [ngValue]="20">20 items per page</option> 
            	</select> 
        	</div> 
    	</ng-template> 
	</li> 
</ul> 
<div [ngbNavOutlet]="nav"></div>

4.2 ng-table.component.scss

.data-table {  
	margin-top: 3em; 
}

4.3 ng-table.component.ts

import { NgFor} from '@angular/common'; 
import { Component } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { NgbTypeaheadModule, NgbPaginationModule, NgbNavModule } from '@ng-bootstrap/ng-bootstrap'; 
import { UserData } from '../interfaces/user-data'; 
 
@Component({ 
  selector: 'app-ng-table', 
  standalone: true, 
  imports: [NgFor,NgbNavModule,FormsModule, NgbTypeaheadModule, NgbPaginationModule], 
  templateUrl: './ng-table.component.html', 
  styleUrls: ['./ng-table.component.scss'] 
}) 
export class NgTableComponent { 
  userData: UserData[] = [ 
	{ firstName: "Minna", lastName: "Amigon", email: "minna_amigon@yahoo.com" }, 
	{ firstName: "Abel", lastName: "Maclead", email: "amaclead@gmail.com" }, 
	{ firstName: "Kiley", lastName: "Caldarera", email: "kiley.caldarera@aol.com" }, 
	{ firstName: "Graciela", lastName: "Ruta", email: "gruta@cox.net" }, 
	{ firstName: "Cammy", lastName: "Albares", email: "calbares@gmail.com" }, 
	{ firstName: "Mattie", lastName: "Poquette", email: "mattie@aol.com" }, 
	{ firstName: "Meaghan", lastName: "Garufi", email: "meaghan@hotmail.com" }, 
	{ firstName: "Gladys", lastName: "Rim", email: "gladys.rim@rim.org" }, 
	{ firstName: "Yuki", lastName: "Whobrey", email: "yuki_whobrey@aol.com" }, 
	{ firstName: "Fletcher", lastName: "Flosi", email: "fletcher.flosi@yahoo.com" }, 
	{ firstName: "Minna", lastName: "Amigon", email: "minna_amigon@yahoo.com" }, 
	{ firstName: "Abel", lastName: "Maclead", email: "amaclead@gmail.com" }, 
  ]; 
  page = 1; 
  pageSize = 5; 
  total = this.userData.length; 
  dataList: UserData[] = [] 
 
  constructor() { 
	this.filterData(); 
  } 
 
  filterData() { 
	this.dataList = this.userData.map((data, i) => ({ id: i + 1, ...data })).slice( 
  	(this.page - 1) * this.pageSize, 
  	(this.page - 1) * this.pageSize + this.pageSize, 
	); 
  } 
}

5. Route configuration within the ‘app-routing.module.ts’ file.

import { NgModule } from '@angular/core'; 
import { RouterModule, Routes } from '@angular/router'; 
import { NgTableComponent } from './ng-table/ng-table.component'; 
 
const routes: Routes = [ 
  { path: '', pathMatch: 'full', redirectTo: 'ng-table' }, 
  { path: 'ng-table', component: NgTableComponent } 
]; 
 
@NgModule({ 
  imports: [RouterModule.forRoot(routes)], 
  exports: [RouterModule] 
}) 
export class AppRoutingModule { }

Folder Structure

Output- UI images

2.3 NGX- Bootstrap

Valor introduced NGX Bootstrap, a popular Angular UI component library that provides Bootstrap components implemented with Angular. This removes the need to include Bootstrap’s original JavaScript components; you can rely on Bootstrap markup and CSS while using Angular for behavior. It is a fast and straightforward method to integrate Bootstrap 3 and 4 components into Angular applications.

Because all Bootstrap components are implemented in Angular, they deliver responsive UIs and improved performance across platforms. It is one of the quickest approaches to incorporate Bootstrap 3 or Bootstrap 4. NGX Bootstrap also offers built-in animation support and additional features such as nested modals, a modal-as-a-service pattern, and sortable/drag-and-drop components. The project is well supported by the community and has earned about 5.5K stars on GitHub.

NGX Bootstrap Features:

Numerous Bootstrap components
Carousel
Tooltips
Popovers
Accordion

NGX Bootstrap Components:

Accordion
Pagination
Popover
Buttons
Tooltip

Installation:

For the installation of NGX Bootstrap, implement the code given below in NPM or Yarn.

// with npm
npm i ngx-bootstrap
 
// with yarn
yarn add ngx-bootstrap

Usage of NGX Bootstrap:

1. Create a new project “angular-ngx-bootstrap-examples” using the command below:

ng new angular-ngx-bootstrap-examples 
 
cd .\angular-ngx-bootstrap-examples\

2. Install ngx-bootstrap

ng add ngx-bootstrap

3. Create a new interface

ng generate interface interfaces/user-data

user-data.ts

export interface UserData { 
 id: number; 
 firstName: string; 
 lastName: string; 
 status: boolean; 
 email: string; 
}

4. Create a new pipe

ng generate pipe pipes/paginate-pipe

import { Pipe, PipeTransform } from '@angular/core'; 
 
@Pipe({ 
  name: 'paginatePipe', 
standalone: true 
}) 
export class PaginatePipePipe implements PipeTransform { 
 
  transform(value: any[], currentPage: number, perpage: number): any { 
	let result = value.filter((curr, index) => { 
  	return index >= (currentPage - 1) * perpage && index < currentPage * perpage 
	}); 
	return result; 
  } 
 
}

5. Create a new component

ng generate component ngx-table

5.1 ngx-table.component.html

<tabset> 
	<tab heading="NGX Table" id="tab1"> 
    	<div class="alt-d" *ngIf="isAlertActive"> 
        	<alert [type]="'success'" dismissOnTimeout="3000" (onClosed)="isAlertActive = false">You have successfully changed status.</alert> 
    	</div> 
    	<table class="table table-striped data-table"> 
        	<thead> 
            	<tr> 
                	<th scope="col">#</th> 
                	<th scope="col" sortable="firstName">First Name</th> 
                	<th scope="col" sortable="lastName">Last Name</th> 
                	<th scope="col" sortable="email">Email</th> 
                	<th scope="col">Action</th> 
            	</tr> 
        	</thead> 
        	<tbody> 
            	<tr *ngFor="let data of (userData | paginatePipe:currentPage:itemsPerPage);"> 
                	<th scope="row">{{ data.id }}</th> 
                	<td>{{data.firstName}}</td> 
                	<td>{{data.lastName}}</td> 
                	<td>{{data.email}}</td> 
                	<td> 
                    	<button  type="button" class="btn " [ngClass]="data.status ? 'btn-primary' : 'btn-danger'" [popover]="'Click to change user status'" 
                        	triggers="mouseenter:mouseleave" (click)="openModal(template, data.id)"> 
                        	{{data.status? 'Active': 'Inactive'}} 
                    	</button> 
                	</td> 
            	</tr> 
        	</tbody> 
    	</table> 
    	<pagination [totalItems]="totalItems" [itemsPerPage]="itemsPerPage" [maxSize]="maxSize" 
        	[(ngModel)]="currentPage" (pageChanged)="pageChanged($event)"></pagination> 
	</tab> 
</tabset> 
<ng-template #template> 
	<div class="modal-body text-center"> 
    	<p>Do you want to change status?</p> 
    	<button type="button" class="btn btn-default" (click)="confirm()">Yes</button> 
    	<button type="button" class="btn btn-primary" (click)="decline()">No</button> 
	</div> 
</ng-template>

5.2 ngx-table.component.scss

.data-table {  
	margin-top: 3em; 
} 
.alt-d { 
	margin: 10px 20px 0 20px; 
}

5.3 ngx-table.component.ts

import { Component, TemplateRef } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { PageChangedEvent, PaginationModule } from 'ngx-bootstrap/pagination'; 
import { PopoverModule } from 'ngx-bootstrap/popover'; 
import { TabsModule } from 'ngx-bootstrap/tabs'; 
import { FormsModule } from '@angular/forms'; 
import { PaginatePipePipe } from '../pipes/paginate-pipe.pipe'; 
import { BsModalRef, BsModalService, ModalModule } from 'ngx-bootstrap/modal'; 
import { AlertModule } from 'ngx-bootstrap/alert'; 
import { UserData } from '../interfaces/user-data'; 
 
 
@Component({ 
  selector: 'app-ngx-table', 
  standalone: true, 
  imports: [CommonModule, FormsModule, AlertModule, PaginationModule,  
        	TabsModule, PaginatePipePipe, PopoverModule, ModalModule], 
  providers: [BsModalService], 
  templateUrl: './ngx-table.component.html', 
  styleUrls: ['./ngx-table.component.scss'] 
}) 
export class NgxTableComponent { 
  userData: UserData[] = [ 
	{ id: 1, firstName: "Minna", lastName: "Amigon", status: true, email: "minna_amigon@yahoo.com" }, 
	{ id: 2, firstName: "Abel", lastName: "Maclead", status: true, email: "amaclead@gmail.com" }, 
	{ id: 3, firstName: "Kiley", lastName: "Caldarera", status: true, email: "kiley.caldarera@aol.com" }, 
	{ id: 4, firstName: "Graciela", lastName: "Ruta", status: true, email: "gruta@cox.net" }, 
	{ id: 5, firstName: "Cammy", lastName: "Albares", status: true, email: "calbares@gmail.com" }, 
	{ id: 6, firstName: "Mattie", lastName: "Poquette", status: true, email: "mattie@aol.com" }, 
	{ id: 7, firstName: "Meaghan", lastName: "Garufi", status: true, email: "meaghan@hotmail.com" }, 
	{ id: 8, firstName: "Gladys", lastName: "Rim", status: true, email: "gladys.rim@rim.org" }, 
	{ id: 9, firstName: "Yuki", lastName: "Whobrey", status: true, email: "yuki_whobrey@aol.com" }, 
	{ id: 10, firstName: "Fletcher", lastName: "Flosi", status: true, email: "fletcher.flosi@yahoo.com" }, 
	{ id: 11, firstName: "Minna", lastName: "Amigon", status: true, email: "minna_amigon@yahoo.com" }, 
	{ id: 12, firstName: "Abel", lastName: "Maclead", status: true, email: "amaclead@gmail.com" }, 
  ]; 
  totalItems: number = this.userData.length; 
  currentPage: number = 1; 
  itemsPerPage: number = 5; 
  page!: number; 
  maxSize: number = 5; 
  modalRef?: BsModalRef; 
  isAlertActive: boolean = false; 
  constructor(private modalService: BsModalService) { } 
 
  pageChanged(event: PageChangedEvent): void { 
	this.page = event.page; 
  } 
 
  openModal(template: TemplateRef<void>, id: number) { 
	this.modalRef = this.modalService.show(template, { class: 'modal-sm', id: id }); 
  } 
 
  confirm(): void { 
	this.isAlertActive = true 
	this.userData[Number(this.modalRef?.id) - 1].status = !this.userData[Number(this.modalRef?.id) - 1].status; 
	this.modalRef?.hide(); 
  } 
 
  decline(): void { 
	this.modalRef?.hide(); 
  } 
 
}

import { Component, TemplateRef } from '@angular/core'; import { CommonModule } from '@angular/common'; import { PageChangedEvent, PaginationModule } from 'ngx-bootstrap/pagination'; import { PopoverModule } from 'ngx-bootstrap/popover'; import { TabsModule } from 'ngx-bootstrap/tabs'; import { FormsModule } from '@angular/forms'; import { PaginatePipePipe } from '../pipes/paginate-pipe.pipe'; import { BsModalRef, BsModalService, ModalModule } from 'ngx-bootstrap/modal'; import { AlertModule } from 'ngx-bootstrap/alert'; import { UserData } from '../interfaces/user-data'; @Component({ selector: 'app-ngx-table', standalone: true, imports: [CommonModule, FormsModule, AlertModule, PaginationModule, TabsModule, PaginatePipePipe, PopoverModule, ModalModule], providers: [BsModalService], templateUrl: './ngx-table.component.html', styleUrls: ['./ngx-table.component.scss'] }) export class NgxTableComponent { userData: UserData[] = [ { id: 1, firstName: "Minna", lastName: "Amigon", status: true, email: "minna_amigon@yahoo.com" }, { id: 2, firstName: "Abel", lastName: "Maclead", status: true, email: "amaclead@gmail.com" }, { id: 3, firstName: "Kiley", lastName: "Caldarera", status: true, email: "kiley.caldarera@aol.com" }, { id: 4, firstName: "Graciela", lastName: "Ruta", status: true, email: "gruta@cox.net" }, { id: 5, firstName: "Cammy", lastName: "Albares", status: true, email: "calbares@gmail.com" }, { id: 6, firstName: "Mattie", lastName: "Poquette", status: true, email: "mattie@aol.com" }, { id: 7, firstName: "Meaghan", lastName: "Garufi", status: true, email: "meaghan@hotmail.com" }, { id: 8, firstName: "Gladys", lastName: "Rim", status: true, email: "gladys.rim@rim.org" }, { id: 9, firstName: "Yuki", lastName: "Whobrey", status: true, email: "yuki_whobrey@aol.com" }, { id: 10, firstName: "Fletcher", lastName: "Flosi", status: true, email: "fletcher.flosi@yahoo.com" }, { id: 11, firstName: "Minna", lastName: "Amigon", status: true, email: "minna_amigon@yahoo.com" }, { id: 12, firstName: "Abel", lastName: "Maclead", status: true, email: "amaclead@gmail.com" }, ]; totalItems: number = this.userData.length; currentPage: number = 1; itemsPerPage: number = 5; page!: number; maxSize: number = 5; modalRef?: BsModalRef; isAlertActive: boolean = false; constructor(private modalService: BsModalService) { } pageChanged(event: PageChangedEvent): void { this.page = event.page; } openModal(template: TemplateRef<void>, id: number) { this.modalRef = this.modalService.show(template, { class: 'modal-sm', id: id }); } confirm(): void { this.isAlertActive = true this.userData[Number(this.modalRef?.id) - 1].status = !this.userData[Number(this.modalRef?.id) - 1].status; this.modalRef?.hide(); } decline(): void { this.modalRef?.hide(); } }

6. Route configuration within the ‘app-routing.module.ts’ file.

import { NgModule } from '@angular/core'; 
import { RouterModule, Routes } from '@angular/router'; 
import { NgxTableComponent } from './ngx-table/ngx-table.component'; 
 
const routes: Routes = [ 
  { path: '', pathMatch: 'full', redirectTo: 'ngx-table' }, 
  { path: 'ngx-table', component: NgxTableComponent } 
]; 
 
@NgModule({ 
  imports: [RouterModule.forRoot(routes)], 
  exports: [RouterModule] 
}) 
export class AppRoutingModule { }

Folder Structure

Output- UI images

2.4 Kendo UI

The next name in this list of Angular libraries is Kendo UI. It is a high-quality Angular UI component toolkit that helps take Angular projects to the next level. Kendo UI enables developers to step ahead with the advanced app development process. It is one of the most professional Angular component libraries.

Many features of Kendo UI for Angular make it different from competing libraries. There are a variety of UI components designed for speed, performance, localization, and accessibility. The library includes more than 80 components and provides tools for theming, upgrades, and flexible customization.

Kendo UI Features:

Easy integration
Customizable themes
Complies with accessibility standards
Responsive design
Supports JavaScript and TypeScript development

Some of the Kendo UI Components:

Scheduler
Grid
TreeView
Charts

Installation:

For the installation of Kendo UI, implement the code given below in NPM or Yarn.

// with npm
npm install --save @progress/kendo-ui
 
// with yarn
yarn add @progress/kendo-ui

Usage of Kendo UI:

Kendo UI is an Angular component library that is well suited for enterprise applications with complex user interactions and extensive data management.

1. Create a new project “angular-kendo-ui-examples” using the command below:

2. Install kendo-ui related library

npm install @progress/kendo-ui 
npm install @progress/kendo-angular-charts 
npm install @progress/kendo-angular-grid

npm install hammerjs

3. Create a new interface

ng generate interface interfaces/user-data

user-data.ts

export interface UserData { 
 id: number; 
 firstName: string; 
 lastName: string; 
 status: boolean; 
 email: string; 
}

4. Create a new component

4.1 kenda-table.component.html

<kendo-grid [kendoGridBinding]="gridView" kendoGridSelectBy="id" [selectedKeys]="mySelection" [pageSize]="10" 
	[pageable]="true" [sortable]="true" [groupable]="true" [reorderable]="true" [resizable]="true" [height]="500" 
	[columnMenu]="{ filter: false }" (cellClick)="cellClick($event)"> 
	<kendo-grid-column-group title="User Data" [columnMenu]="false"> 
    	<kendo-grid-column field="firstName" title="First Name" [width]="220"> 
    	</kendo-grid-column> 
    	<kendo-grid-column field="lastName" title="Last Name" [width]="220"> 
    	</kendo-grid-column> 
    	<kendo-grid-column field="email" title="Email" [width]="130"> 
    	</kendo-grid-column> 
    	<kendo-grid-column field="status" title="Status" [width]="200"> 
        	<ng-template kendoGridCellTemplate let-dataItem> 
            	<div >{{ dataItem.status ? 'Active': 'Inactive' }}</div> 
        	</ng-template> 
    	</kendo-grid-column> 
	</kendo-grid-column-group> 
</kendo-grid>

4.2 kenda-table.component.ts

import { Component, OnInit } from '@angular/core'; 
import { UserData } from '../interfaces/user-data'; 
 
@Component({ 
  selector: 'app-kenda-table', 
  templateUrl: './kenda-table.component.html', 
  styleUrls: ['./kenda-table.component.scss'] 
}) 
export class KendaTableComponent implements OnInit { 
  userData: UserData[] = [ 
	{ id: 1, firstName: "Minna", lastName: "Amigon", status: true ,email: "minna_amigon@yahoo.com" }, 
	{ id: 2, firstName: "Abel", lastName: "Maclead", status: true ,email: "amaclead@gmail.com" }, 
	{ id: 3, firstName: "Kiley", lastName: "Caldarera", status: false ,email: "kiley.caldarera@aol.com" }, 
	{ id: 4, firstName: "Graciela", lastName: "Ruta", status: true ,email: "gruta@cox.net" }, 
	{ id: 5, firstName: "Cammy", lastName: "Albares", status: true ,email: "calbares@gmail.com" }, 
	{ id: 6, firstName: "Mattie", lastName: "Poquette", status: true ,email: "mattie@aol.com" }, 
	{ id: 7, firstName: "Meaghan", lastName: "Garufi", status: false ,email: "meaghan@hotmail.com" }, 
	{ id: 8, firstName: "Gladys", lastName: "Rim", status: true ,email: "gladys.rim@rim.org" }, 
	{ id: 9, firstName: "Yuki", lastName: "Whobrey", status: true ,email: "yuki_whobrey@aol.com" }, 
	{ id: 10, firstName: "Fletcher", lastName: "Flosi", status: true ,email: "fletcher.flosi@yahoo.com" }, 
	{ id: 11, firstName: "Minna", lastName: "Amigon", status: true ,email: "minna_amigon@yahoo.com" }, 
	{ id: 12, firstName: "Abel", lastName: "Maclead", status: true ,email: "amaclead@gmail.com" }, 
	{ id: 13, firstName: "Kiley", lastName: "Caldarera", status: true ,email: "kiley.caldarera@aol.com" }, 
	{ id: 14, firstName: "Graciela", lastName: "Ruta", status: true ,email: "gruta@cox.net" }, 
	{ id: 15, firstName: "Cammy", lastName: "Albares", status: true ,email: "calbares@gmail.com" }, 
	{ id: 16, firstName: "Mattie", lastName: "Poquette", status: true ,email: "mattie@aol.com" }, 
	{ id: 17, firstName: "Meaghan", lastName: "Garufi", status: true ,email: "meaghan@hotmail.com" }, 
	{ id: 18, firstName: "Gladys", lastName: "Rim", status: true ,email: "gladys.rim@rim.org" }, 
	{ id: 19, firstName: "Yuki", lastName: "Whobrey", status: true ,email: "yuki_whobrey@aol.com" }, 
	{ id: 20, firstName: "Fletcher", lastName: "Flosi", status: true ,email: "fletcher.flosi@yahoo.com" }, 
	{ id: 21, firstName: "Minna", lastName: "Amigon", status: true ,email: "minna_amigon@yahoo.com" }, 
	{ id: 22, firstName: "Abelq", lastName: "Maclead", status: true ,email: "amaclead@gmail.com" }, 
  ]; 
  gridView!: UserData[]; 
  mySelection: string[] = []; 
 
  ngOnInit(): void { 
	this.gridView = this.userData; 
  } 
 
  cellClick(e: any) { 
	console.log(e); 
  } 
}

import { Component, OnInit } from '@angular/core'; import { UserData } from '../interfaces/user-data'; @Component({ selector: 'app-kenda-table', templateUrl: './kenda-table.component.html', styleUrls: ['./kenda-table.component.scss'] }) export class KendaTableComponent implements OnInit { userData: UserData[] = [ { id: 1, firstName: "Minna", lastName: "Amigon", status: true ,email: "minna_amigon@yahoo.com" }, { id: 2, firstName: "Abel", lastName: "Maclead", status: true ,email: "amaclead@gmail.com" }, { id: 3, firstName: "Kiley", lastName: "Caldarera", status: false ,email: "kiley.caldarera@aol.com" }, { id: 4, firstName: "Graciela", lastName: "Ruta", status: true ,email: "gruta@cox.net" }, { id: 5, firstName: "Cammy", lastName: "Albares", status: true ,email: "calbares@gmail.com" }, { id: 6, firstName: "Mattie", lastName: "Poquette", status: true ,email: "mattie@aol.com" }, { id: 7, firstName: "Meaghan", lastName: "Garufi", status: false ,email: "meaghan@hotmail.com" }, { id: 8, firstName: "Gladys", lastName: "Rim", status: true ,email: "gladys.rim@rim.org" }, { id: 9, firstName: "Yuki", lastName: "Whobrey", status: true ,email: "yuki_whobrey@aol.com" }, { id: 10, firstName: "Fletcher", lastName: "Flosi", status: true ,email: "fletcher.flosi@yahoo.com" }, { id: 11, firstName: "Minna", lastName: "Amigon", status: true ,email: "minna_amigon@yahoo.com" }, { id: 12, firstName: "Abel", lastName: "Maclead", status: true ,email: "amaclead@gmail.com" }, { id: 13, firstName: "Kiley", lastName: "Caldarera", status: true ,email: "kiley.caldarera@aol.com" }, { id: 14, firstName: "Graciela", lastName: "Ruta", status: true ,email: "gruta@cox.net" }, { id: 15, firstName: "Cammy", lastName: "Albares", status: true ,email: "calbares@gmail.com" }, { id: 16, firstName: "Mattie", lastName: "Poquette", status: true ,email: "mattie@aol.com" }, { id: 17, firstName: "Meaghan", lastName: "Garufi", status: true ,email: "meaghan@hotmail.com" }, { id: 18, firstName: "Gladys", lastName: "Rim", status: true ,email: "gladys.rim@rim.org" }, { id: 19, firstName: "Yuki", lastName: "Whobrey", status: true ,email: "yuki_whobrey@aol.com" }, { id: 20, firstName: "Fletcher", lastName: "Flosi", status: true ,email: "fletcher.flosi@yahoo.com" }, { id: 21, firstName: "Minna", lastName: "Amigon", status: true ,email: "minna_amigon@yahoo.com" }, { id: 22, firstName: "Abelq", lastName: "Maclead", status: true ,email: "amaclead@gmail.com" }, ]; gridView!: UserData[]; mySelection: string[] = []; ngOnInit(): void { this.gridView = this.userData; } cellClick(e: any) { console.log(e); } }

5. Route configuration within the ‘app-routing.module.ts’ file.

import { NgModule } from '@angular/core'; 
import { RouterModule, Routes } from '@angular/router'; 
import { KendaTableComponent } from './kenda-table/kenda-table.component'; 
 
const routes: Routes = [ 
  { path: '', pathMatch: 'full', redirectTo: 'kenda' }, 
  { path: 'kenda', component: KendaTableComponent } 
]; 
 
@NgModule({ 
  imports: [RouterModule.forRoot(routes)], 
  exports: [RouterModule] 
}) 
export class AppRoutingModule { }

Folder Structure

Output – UI images

2.5 Onsen UI

Angular UI and Onsen UI are utilized to develop stunning Android and iOS apps. Onsen UI includes Angular directives that automatically adapt styling based on the platform.

Onsen UI is an open-source collection of UI components for building HTML5 hybrid mobile applications. This also includes various Angular components for building cross-platform web applications and hybrid apps.

Importantly, it supports both Android and iOS. Angular developers will find it simple to set up and learn. The project has about 8.8K stars on GitHub.

Onsen UI Features:

Cross-platform compatibility
Customizable themes
Ready-made components
Responsive design

Some of the Onsen UI Components:

Ons-navigator
Ons-splitter
Ons-carousel
Ons-tabbar
Ons-switch
Ons-dialog

Installation:

Leverage NPM for installing the Onsen UI with the following command

// with npm
npm install onsenui ngx-onsenui --save

Usage of Onsen UI:

1. Create a new project “angular-onsen-examples” using the command below:

ng new angular-onsen-examples 
 
cd .\angular-onsen-examples \

2. Install Onsen

Use npm to install Onsen UI Core (onsenui) and the binding library for Angular (ngx-onsenui).

npm install onsenui ngx-onsenui --save

Unpkg provides CDN support for Onsen UI’s CSS and JavaScript. Just use these CDN links.

<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css"> 
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css"> 
<script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>

3. Create a new interface

ng generate interface interfaces/animal-data

animal-data.ts

export interface AnimalData { 
	id: number; 
	name: string; 
	description: string; 
}

4. Update app component

4.1 app.component.html

<ons-page id="AnimalList"> 
  <ons-toolbar id="Animal-List"> 
	<div class="center">{{title}}</div> 
  </ons-toolbar> 
 
  <ons-list id="Animal-list"> 
	<ons-list-item *ngFor="let item of animalList" expandable> 
  	<div class="nd-b">{{item.id}}. {{item.name}}</div> 
  	<div class="expandable-content"> 
   	{{item.description}} 
  	</div> 
	</ons-list-item> 
  </ons-list> 
</ons-page>  
 
<router-outlet></router-outlet>

4.2 app.component.scss

.nd-b{ 
	font-weight: bold; 
}

4.3 app.component.ts

import { Component } from '@angular/core'; 
import { AnimalData } from './interfaces/animal-data'; 
 
@Component({ 
  selector: 'app-root', 
  templateUrl: './app.component.html', 
  styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
  title: string = 'Animal List'; 
  animalList: AnimalData[] = [ 
	{ id: 1, name: "The Cheetah", description: 'Known for its unparalleled speed, the cheetah serves as an analogy for velocity and agility in nature. Through studying the cheetah`s anatomy and hunting strategies, we gain insights into the biomechanics of rapid movement and pursuit.' }, 
	{ id: 2, name: "The Octopus", description: ' With its remarkable intelligence and adaptive abilities, the octopus exemplifies flexibility and problem-solving in the animal kingdom. By examining the octopus`s complex nervous system and camouflage techniques, we explore the concept of adaptability and innovation.' }, 
	{ id: 3, name: "The Bee", description: 'As a symbol of community and cooperation, the bee offers lessons in social organization and collective action. Through the study of bee colonies and hive dynamics, we uncover principles of collaboration and division of labor.' }, 
	{ id: 4, name: "The Polar Bear", description: 'Thriving in one of the harshest environments on Earth, the polar bear embodies resilience and specialized adaptation. By understanding the bear`s thick fur, insulating blubber, and hunting techniques, we delve into the concept of survival in extreme conditions.' }, 
	{ id: 5, name: "The Hummingbird", description: 'With its extraordinary flight capabilities and specialized anatomy, the hummingbird represents efficiency and precision in nature. Through analysis of its rapid wingbeats and unique feeding strategies, we explore the concept of optimization and energy conservation.' } 
  ]; 
}

5. Update app.module.ts’ file.

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
 
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { OnsenModule } from 'ngx-onsenui'; 
 
@NgModule({ 
  declarations: [ 
	AppComponent 
  ], 
  imports: [ 
	BrowserModule, 
	AppRoutingModule, 
	OnsenModule 
  ], 
  providers: [], 
  bootstrap: [AppComponent], 
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ] 
 
}) 
export class AppModule { }

Folder Structure

Output – UI images

2.6 VaadinUI

Vaadin is one of the leading component libraries for building web and mobile user interfaces. It provides more than 45 open-source components and helps offer an enhanced user experience. Built on the W3C Web Components standards, Vaadin is compatible with multiple frameworks and modern browsers.

Vaadin Features:

Figma library
Quick and secure server-client communication
Route management
Support for screen readers and keyboard navigation
Responsive design

Some of the Vaadin Components:

Charts
Data grids
Filterable dropdown field
Date picker

Installation:

Use NPM to install the Vaadin.

// with npm
npm i @vaadin/vaadin-grid

Usage of Vaadin UI:

1. Create a new project “angular-vaadin-examples” using the command below:

ng new angular-vaadin-examples 
 
cd .\angular-vaadin-examples\

2. Install Vaadin

ng add @vaadin/vaadin

3. Create a new interface

ng generate interface interfaces/user-data

user-data.ts

export interface UserData { 
 id: number; 
 firstName: string; 
 lastName: string; 
 email: string; 
 updatedDate: Date; 
}

4. Create a new component

ng generate component vaadin-table

4.1 vaadin-table.component.html

<vaadin-app-layout> 
	<h1 slot="navbar">User List</h1> 
 
	<vaadin-grid editor-position="bottom" [items]="userData" multi-sort multi-sort-priority="append"> 
  	<vaadin-grid-sort-column path="id" header="id" resizable></vaadin-grid-sort-column> 
  	<vaadin-grid-filter-column path="firstName"header="First Name" resizable></vaadin-grid-filter-column> 
  	<vaadin-grid-filter-column path="lastName" header="Last Name" resizable></vaadin-grid-filter-column> 
  	<vaadin-grid-filter-column path="email" header="Email" resizable ></vaadin-grid-filter-column> 
  	<vaadin-grid-filter-column path="updatedDate" header="Updated At" [renderer]="updatedDateRenderer" resizable></vaadin-grid-filter-column> 
	</vaadin-grid> 
  </vaadin-app-layout>

4.2 vaadin-table.component.ts

import { Component } from '@angular/core'; 
import { customElement } from 'lit/decorators.js'; 
import { LitElement } from 'lit'; 
import '@vaadin/grid/vaadin-grid-sort-column'; 
import '@vaadin/grid/vaadin-grid-filter-column'; 
import '@vaadin/crud'; 
import { UserData } from '../interfaces/user-data'; 
 
 
@customElement('grid-item-details') 
@Component({ 
  selector: 'app-vaadin-table', 
  templateUrl: './vaadin-table.component.html', 
  styleUrls: ['./vaadin-table.component.scss'] 
}) 
export class VaadinTableComponent extends LitElement { 
 
  userData: UserData[] = [ 
	{ id: 1, firstName: "Minna", lastName: "Amigon", email: "minna_amigon@yahoo.com", updatedDate: new Date(Date.UTC(2020, 2, 19, 0, 0, 0)) }, 
	{ id: 2, firstName: "Abel", lastName: "Maclead", email: "amaclead@gmail.com", updatedDate: new Date(Date.UTC(2021, 2, 20, 0, 0, 0)) }, 
	{ id: 3, firstName: "Kiley", lastName: "Caldarera", email: "kiley.caldarera@aol.com", updatedDate: new Date(Date.UTC(2022, 5, 9, 0, 0, 0)) }, 
	{ id: 4, firstName: "Graciela", lastName: "Ruta", email: "gruta@cox.net", updatedDate: new Date(Date.UTC(2020, 2, 19, 0, 0, 0)) }, 
	{ id: 5, firstName: "Cammy", lastName: "Albares", email: "calbares@gmail.com", updatedDate: new Date(Date.UTC(2023, 6, 18, 0, 0, 0)) }, 
	{ id: 6, firstName: "Mattie", lastName: "Poquette", email: "mattie@aol.com", updatedDate: new Date(Date.UTC(2020, 2, 19, 0, 0, 0)) }, 
	{ id: 7, firstName: "Meaghan", lastName: "Garufi", email: "meaghan@hotmail.com", updatedDate: new Date(Date.UTC(2024, 2, 9, 0, 0, 0)) }, 
	{ id: 8, firstName: "Gladys", lastName: "Rim", email: "gladys.rim@rim.org", updatedDate: new Date(Date.UTC(2020, 2, 19, 0, 0, 0)) }, 
	{ id: 9, firstName: "Yuki", lastName: "Whobrey", email: "yuki_whobrey@aol.com", updatedDate: new Date(Date.UTC(2020, 2, 19, 0, 0, 0)) }, 
	{ id: 10, firstName: "Fletcher", lastName: "Flosi", email: "fletcher.flosi@yahoo.com", updatedDate: new Date(Date.UTC(2021, 7, 11, 0, 0, 0)) }, 
	{ id: 11, firstName: "Minna", lastName: "Amigon", email: "minna_amigon@yahoo.com", updatedDate: new Date(Date.UTC(2020, 2, 19, 0, 0, 0)) }, 
	{ id: 12, firstName: "Abel", lastName: "Maclead", email: "amaclead@gmail.com", updatedDate: new Date(Date.UTC(2020, 2, 19, 0, 0, 0)) }, 
  ]; 
 
  /* Renderer date column in the table */ 
  updatedDateRenderer(root: any, column: any, rowData: any) { 
	let container = root.firstElementChild; 
	if (!container) { 
  	container = document.createElement('div'); 
	} 
	const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; 
	container.innerText = rowData.item.updatedDate ? rowData.item.updatedDate.toLocaleDateString('en-IN', options) : ''; 
	root.appendChild(container); 
  } 
}

import { Component } from '@angular/core'; import { customElement } from 'lit/decorators.js'; import { LitElement } from 'lit'; import '@vaadin/grid/vaadin-grid-sort-column'; import '@vaadin/grid/vaadin-grid-filter-column'; import '@vaadin/crud'; import { UserData } from '../interfaces/user-data'; @customElement('grid-item-details') @Component({ selector: 'app-vaadin-table', templateUrl: './vaadin-table.component.html', styleUrls: ['./vaadin-table.component.scss'] }) export class VaadinTableComponent extends LitElement { userData: UserData[] = [ { id: 1, firstName: "Minna", lastName: "Amigon", email: "minna_amigon@yahoo.com", updatedDate: new Date(Date.UTC(2020, 2, 19, 0, 0, 0)) }, { id: 2, firstName: "Abel", lastName: "Maclead", email: "amaclead@gmail.com", updatedDate: new Date(Date.UTC(2021, 2, 20, 0, 0, 0)) }, { id: 3, firstName: "Kiley", lastName: "Caldarera", email: "kiley.caldarera@aol.com", updatedDate: new Date(Date.UTC(2022, 5, 9, 0, 0, 0)) }, { id: 4, firstName: "Graciela", lastName: "Ruta", email: "gruta@cox.net", updatedDate: new Date(Date.UTC(2020, 2, 19, 0, 0, 0)) }, { id: 5, firstName: "Cammy", lastName: "Albares", email: "calbares@gmail.com", updatedDate: new Date(Date.UTC(2023, 6, 18, 0, 0, 0)) }, { id: 6, firstName: "Mattie", lastName: "Poquette", email: "mattie@aol.com", updatedDate: new Date(Date.UTC(2020, 2, 19, 0, 0, 0)) }, { id: 7, firstName: "Meaghan", lastName: "Garufi", email: "meaghan@hotmail.com", updatedDate: new Date(Date.UTC(2024, 2, 9, 0, 0, 0)) }, { id: 8, firstName: "Gladys", lastName: "Rim", email: "gladys.rim@rim.org", updatedDate: new Date(Date.UTC(2020, 2, 19, 0, 0, 0)) }, { id: 9, firstName: "Yuki", lastName: "Whobrey", email: "yuki_whobrey@aol.com", updatedDate: new Date(Date.UTC(2020, 2, 19, 0, 0, 0)) }, { id: 10, firstName: "Fletcher", lastName: "Flosi", email: "fletcher.flosi@yahoo.com", updatedDate: new Date(Date.UTC(2021, 7, 11, 0, 0, 0)) }, { id: 11, firstName: "Minna", lastName: "Amigon", email: "minna_amigon@yahoo.com", updatedDate: new Date(Date.UTC(2020, 2, 19, 0, 0, 0)) }, { id: 12, firstName: "Abel", lastName: "Maclead", email: "amaclead@gmail.com", updatedDate: new Date(Date.UTC(2020, 2, 19, 0, 0, 0)) }, ]; /* Renderer date column in the table */ updatedDateRenderer(root: any, column: any, rowData: any) { let container = root.firstElementChild; if (!container) { container = document.createElement('div'); } const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; container.innerText = rowData.item.updatedDate ? rowData.item.updatedDate.toLocaleDateString('en-IN', options) : ''; root.appendChild(container); } }

5. Route configuration within the ‘app-routing.module.ts’ file.

import { NgModule } from '@angular/core'; 
import { RouterModule, Routes } from '@angular/router'; 
import { VaadinTableComponent } from './vaadin-table/vaadin-table.component'; 
 
const routes: Routes = [ 
  { path: '', pathMatch: 'full', redirectTo: 'vaadin-table' }, 
  { path: 'vaadin-table', component: VaadinTableComponent } 
]; 
 
@NgModule({ 
  imports: [RouterModule.forRoot(routes)], 
  exports: [RouterModule] 
}) 
export class AppRoutingModule { }

Folder Structure

Output – UI images

2.7 Nebular

Nebular is a versatile Angular UI component library focused on application design and adaptability. It includes over 40 UI components, four visual styles, and several modules for authentication and security. You can use Nebular to design an aesthetically pleasing, responsive user interface without relying on third-party dependencies.

Nebular Features:

Authentication layer
Local support
Customizable styles
Free source-code distribution under the MIT license
Eva design system

Nebular components:

Stepper
Sidebar
Layouts
Accordion
Modals
Infinite lists

Installation:

With NPM, install the Nebular

//with npm
npm i node-teradata

Usage of Nebular:

1. Create a new project “angular-nebular-examples” using the command below:

ng new angular-nebular-examples 
 
cd .\angular-nebular-examples\

2. Install Nebular

ng add @nebular/theme

3. Create a new interface

ng generate interface interfaces/user-data

user-data.ts

export interface UserDataField { 
	id: number; 
	firstName: string; 
	lastName: string; 
	email: string; 
} 
 
export interface UserData { 
	data?: UserDataField; 
	children?: UserData[]; 
	expanded?: boolean; 
}

4. Update app component

4.1 app.component.html

<nb-layout> 
  <nb-layout-header fixed>Nebular Table</nb-layout-header> 
  <nb-layout-column> 
	<nb-card> 
  	<nb-card-body> 
    	<label class="search-label" for="search">Search:</label> 
    	<input nbInput [nbFilterInput]="dataSource" id="search" class="search-input"> 
 
    	<table [nbTreeGrid]="dataSource" [nbSort]="dataSource" (sort)="updateSort($event)"> 
      	<tr nbTreeGridHeaderRow *nbTreeGridHeaderRowDef="allColumns"></tr> 
      	<tr nbTreeGridRow *nbTreeGridRowDef="let row; columns: allColumns"></tr> 
 
      	<ng-container [nbTreeGridColumnDef]="customColumn"> 
        	<th nbTreeGridHeaderCell [nbSortHeader]="getSortDirection(customColumn)" *nbTreeGridHeaderCellDef> 
          	{{customColumn}} 
        	</th> 
        	<td nbTreeGridCell *nbTreeGridCellDef="let row"> 
          	<nb-tree-grid-row-toggle [expanded]="row.expanded" *ngIf="row.children"></nb-tree-grid-row-toggle> 
          	{{row.data.id}} 
        	</td> 
      	</ng-container> 
 
      	<ng-container *ngFor="let column of defaultColumns; let index = index" [nbTreeGridColumnDef]="column" 
        	[showOn]="getShowOn(index)"> 
        	<th nbTreeGridHeaderCell [nbSortHeader]="getSortDirection(column)" *nbTreeGridHeaderCellDef> 
          	{{column}} 
        	</th> 
        	<td nbTreeGridCell *nbTreeGridCellDef="let row">{{row.data[column] || '-'}}</td> 
      	</ng-container> 
 
    	</table> 
  	</nb-card-body> 
	</nb-card> 
  </nb-layout-column> 
</nb-layout> 
 
<router-outlet></router-outlet>

4.2 app.component.scss

:host nb-tab { 
	padding: 1.25rem; 
  } 
 
  button[nbTreeGridRowToggle] { 
	background: transparent; 
	border: none; 
	padding: 0; 
  } 
 
  .search-label { 
	display: block; 
  } 
  .search-input { 
	margin-bottom: 1rem; 
  } 
 
  .nb-column-name { 
	width: 100%; 
  } 
 
  @media screen and (min-width: 400px) { 
	.nb-column-name, 
	.nb-column-size { 
  	width: 50%; 
	} 
  } 
 
  @media screen and (min-width: 500px) { 
	.nb-column-name, 
	.nb-column-size, 
	.nb-column-kind { 
  	width: 33.333%; 
	} 
  } 
 
  @media screen and (min-width: 600px) { 
	.nb-column-name { 
  	width: 31%; 
	} 
	.nb-column-size, 
	.nb-column-kind, 
	.nb-column-items { 
  	width: 23%; 
	} 
  }

4.3 app.component.ts

import { ChangeDetectionStrategy, Component } from '@angular/core'; 
import { NbSortDirection, NbSortRequest, NbTreeGridDataSource, NbTreeGridDataSourceBuilder } from '@nebular/theme'; 
import { UserData, UserDataField } from './interfaces/user-data'; 
@Component({ 
  selector: 'app-root', 
  changeDetection: ChangeDetectionStrategy.OnPush, 
  templateUrl: './app.component.html', 
  styleUrls: ['./app.component.scss'] 
}) 
export class AppComponent { 
  userData: UserData[] = [ 
	{ 
  	data: { id: 1, firstName: "Minna", lastName: "Amigon", email: "minna_amigon@yahoo.com" }, 
  	children: [ 
    	{ data: { id: 1, firstName: "Kiley", lastName: "Caldarera", email: "kiley.caldarera@aol.com" } } 
  	] 
	}, 
	{ 
  	data: { id: 2, firstName: "Abel", lastName: "Maclead", email: "amaclead@gmail.com" }, 
  	children: [ 
    	{ data: { id: 1, firstName: "Kiley", lastName: "Caldarera", email: "kiley.caldarera@aol.com" } } 
  	] 
	}, 
	{ 
  	data: { id: 3, firstName: "Kiley", lastName: "Caldarera", email: "kiley.caldarera@aol.com" }, 
  	children: [ 
    	{ data: { id: 1, firstName: "Kiley", lastName: "Caldarera", email: "kiley.caldarera@aol.com" } } 
  	] 
	}, 
	{ data: { id: 4, firstName: "Graciela", lastName: "Ruta", email: "gruta@cox.net" } }, 
	{ data: { id: 5, firstName: "Cammy", lastName: "Albares", email: "calbares@gmail.com" } }, 
  ]; 
  customColumn = 'id'; 
  defaultColumns = ['firstName', 'lastName', 'email']; 
  allColumns = [this.customColumn, ...this.defaultColumns]; 
 
  dataSource!: NbTreeGridDataSource<UserDataField>; 
 
  sortColumn!: string; 
  sortDirection: NbSortDirection = NbSortDirection.NONE; 
  constructor(private dataSourceBuilder: NbTreeGridDataSourceBuilder<UserDataField>) { 
	this.dataSource = this.dataSourceBuilder.create(this.userData); 
  } 
  updateSort(sortRequest: NbSortRequest): void { 
	this.sortColumn = sortRequest.column; 
	this.sortDirection = sortRequest.direction; 
  } 
 
  getSortDirection(column: string): NbSortDirection { 
	if (this.sortColumn === column) { 
  	return this.sortDirection; 
	} 
	return NbSortDirection.NONE; 
  } 
 
 
 
  getShowOn(index: number) { 
	const minWithForMultipleColumns = 400; 
	const nextColumnStep = 100; 
	return minWithForMultipleColumns + (nextColumnStep * index); 
  } 
 
}

import { ChangeDetectionStrategy, Component } from '@angular/core'; import { NbSortDirection, NbSortRequest, NbTreeGridDataSource, NbTreeGridDataSourceBuilder } from '@nebular/theme'; import { UserData, UserDataField } from './interfaces/user-data'; @Component({ selector: 'app-root', changeDetection: ChangeDetectionStrategy.OnPush, templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { userData: UserData[] = [ { data: { id: 1, firstName: "Minna", lastName: "Amigon", email: "minna_amigon@yahoo.com" }, children: [ { data: { id: 1, firstName: "Kiley", lastName: "Caldarera", email: "kiley.caldarera@aol.com" } } ] }, { data: { id: 2, firstName: "Abel", lastName: "Maclead", email: "amaclead@gmail.com" }, children: [ { data: { id: 1, firstName: "Kiley", lastName: "Caldarera", email: "kiley.caldarera@aol.com" } } ] }, { data: { id: 3, firstName: "Kiley", lastName: "Caldarera", email: "kiley.caldarera@aol.com" }, children: [ { data: { id: 1, firstName: "Kiley", lastName: "Caldarera", email: "kiley.caldarera@aol.com" } } ] }, { data: { id: 4, firstName: "Graciela", lastName: "Ruta", email: "gruta@cox.net" } }, { data: { id: 5, firstName: "Cammy", lastName: "Albares", email: "calbares@gmail.com" } }, ]; customColumn = 'id'; defaultColumns = ['firstName', 'lastName', 'email']; allColumns = [this.customColumn, ...this.defaultColumns]; dataSource!: NbTreeGridDataSource<UserDataField>; sortColumn!: string; sortDirection: NbSortDirection = NbSortDirection.NONE; constructor(private dataSourceBuilder: NbTreeGridDataSourceBuilder<UserDataField>) { this.dataSource = this.dataSourceBuilder.create(this.userData); } updateSort(sortRequest: NbSortRequest): void { this.sortColumn = sortRequest.column; this.sortDirection = sortRequest.direction; } getSortDirection(column: string): NbSortDirection { if (this.sortColumn === column) { return this.sortDirection; } return NbSortDirection.NONE; } getShowOn(index: number) { const minWithForMultipleColumns = 400; const nextColumnStep = 100; return minWithForMultipleColumns + (nextColumnStep * index); } }

5. Update app.module.ts file.

import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
 
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NbCardModule, NbInputModule, NbLayoutModule, NbSidebarModule, NbSidebarService, NbSpinnerModule, NbStatusService, NbTabsetModule, NbThemeModule, NbTreeGridModule } from '@nebular/theme'; 
 
@NgModule({ 
  declarations: [ 
	AppComponent 
  ], 
  imports: [ 
	BrowserModule, 
	AppRoutingModule, 
	NbTabsetModule, 
	NbLayoutModule, 
	NbSidebarModule, 
	NbCardModule, 
	NbInputModule, 
	NbLayoutModule,  
	NbTreeGridModule, 
	NbSpinnerModule, 
	NbThemeModule.forRoot({ name: 'default' }), 
 
  ], 
  providers: [NbStatusService,NbSidebarService], 
  bootstrap: [AppComponent], 
  }) 
export class AppModule { }

Folder Structure

Output – UI images

2.8 PrimeNG

Regarded as one of the most dynamic Angular component libraries, PrimeNG includes more than 80 UI components. This open-source library offers responsive, mobile-friendly themes and easy-to-customize templates. Numerous advanced components from PrimeNG help developers elevate the user experience.

Features of PrimeNG:

Theme designer
Customizable templates
More than 280 UI blocks
Regular updates
Vibrant and supportive community
Mobile optimized components

PrimeNG components:

Charts
Panel
Menus
Dropdown
KeyFilter
ListBox
Rating

Installation:

Use NPM or Yram to install the PrimeNG.

// with npm
npm i primeng
 
// with yarn
yarn add primeng

Usage of PrimeNG:

1. Create a new project “angular-material-examples” using command below:

ng new angular-primeng-examples 
 
cd .\angular-primeng-examples\

2. Install primeng

ng add primeng

3. Create a new interface

ng generate interface interfaces/user-data

user-data.ts

export interface UserData { 
	id: number; 
	firstName: string; 
	lastName: string; 
	status: boolean; 
	email: string; 
} 
 
export interface Statuses { 
	label: string; 
	value: boolean; 
}

4. Update app component

4.1 app.component.html

<div class="card"> 
  <p-table #dt1 [value]="userData" dataKey="id" [globalFilterFields]="['firstName','lastName', 'email']" [rows]="5" 
	[showCurrentPageReport]="true" [rowsPerPageOptions]="[5, 10, 25, 50]" [loading]="loading" [paginator]="true" 
	currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"> 
	<ng-template pTemplate="caption"> 
  	<div class="flex"> 
    	<button pButton label="Clear" class="p-button-outlined" icon="pi pi-filter-slash" (click)="clear(dt1)"></button> 
    	<span class="p-input-icon-left ml-auto"> 
      	<i class="pi pi-search"></i> 
      	<input pInputText type="text" [(ngModel)]="filter" (input)="dt1.filterGlobal(filter, 'contains')" 
        	placeholder="Search keyword" /> 
    	</span> 
  	</div> 
	</ng-template> 
	<ng-template pTemplate="header"> 
  	<tr> 
    	<th style="min-width:15rem"> 
      	<div class="flex align-items-center"> 
        	First Name 
        	<p-columnFilter type="text" field="firstName" display="menu"></p-columnFilter> 
      	</div> 
    	</th> 
    	<th style="min-width:15rem"> 
      	<div class="flex align-items-center"> 
        	Last Name 
        	<p-columnFilter type="text" field="lastName" display="menu"></p-columnFilter> 
      	</div> 
    	</th> 
    	<th style="min-width:15rem"> 
      	<div class="flex align-items-center"> 
        	Email 
        	<p-columnFilter type="text" field="email" display="menu"></p-columnFilter> 
      	</div> 
    	</th> 
    	<th style="min-width:10rem"> 
      	<div class="flex align-items-center"> 
        	Status 
        	<p-columnFilter field="status" matchMode="equals" display="menu"> 
          	<ng-template pTemplate="filter" let-value let-filter="filterCallback"> 
            	<p-dropdown [ngModel]="value" [options]="statuses" (onChange)="filter($event.value)" placeholder="Any"> 
              	<ng-template let-option pTemplate="item"> 
                	<p-tag [value]="option.label"></p-tag> 
              	</ng-template> 
            	</p-dropdown> 
          	</ng-template> 
        	</p-columnFilter> 
      	</div> 
    	</th> 
  	</tr> 
	</ng-template> 
	<ng-template pTemplate="body" let-user> 
  	<tr> 
    	<td> 
      	{{ user.firstName }} 
    	</td> 
    	<td> 
      	{{ user.lastName }} 
    	</td> 
    	<td> 
      	{{ user.email }} 
    	</td> 
    	<td> 
      	<p-tag [value]="user.status? 'Active': 'Inactive'"></p-tag> 
    	</td> 
 
  	</tr> 
	</ng-template> 
	<ng-template pTemplate="emptymessage"> 
  	<tr> 
    	<td colspan="7">No user found.</td> 
  	</tr> 
	</ng-template> 
  </p-table> 
</div> 
<router-outlet></router-outlet>

<div class="card"> <p-table #dt1 [value]="userData" dataKey="id" [globalFilterFields]="['firstName','lastName', 'email']" [rows]="5" [showCurrentPageReport]="true" [rowsPerPageOptions]="[5, 10, 25, 50]" [loading]="loading" [paginator]="true" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"> <ng-template pTemplate="caption"> <div class="flex"> <button pButton label="Clear" class="p-button-outlined" icon="pi pi-filter-slash" (click)="clear(dt1)"></button> <span class="p-input-icon-left ml-auto"> <i class="pi pi-search"></i> <input pInputText type="text" [(ngModel)]="filter" (input)="dt1.filterGlobal(filter, 'contains')" placeholder="Search keyword" /> </span> </div> </ng-template> <ng-template pTemplate="header"> <tr> <th style="min-width:15rem"> <div class="flex align-items-center"> First Name <p-columnFilter type="text" field="firstName" display="menu"></p-columnFilter> </div> </th> <th style="min-width:15rem"> <div class="flex align-items-center"> Last Name <p-columnFilter type="text" field="lastName" display="menu"></p-columnFilter> </div> </th> <th style="min-width:15rem"> <div class="flex align-items-center"> Email <p-columnFilter type="text" field="email" display="menu"></p-columnFilter> </div> </th> <th style="min-width:10rem"> <div class="flex align-items-center"> Status <p-columnFilter field="status" matchMode="equals" display="menu"> <ng-template pTemplate="filter" let-value let-filter="filterCallback"> <p-dropdown [ngModel]="value" [options]="statuses" (onChange)="filter($event.value)" placeholder="Any"> <ng-template let-option pTemplate="item"> <p-tag [value]="option.label"></p-tag> </ng-template> </p-dropdown> </ng-template> </p-columnFilter> </div> </th> </tr> </ng-template> <ng-template pTemplate="body" let-user> <tr> <td> {{ user.firstName }} </td> <td> {{ user.lastName }} </td> <td> {{ user.email }} </td> <td> <p-tag [value]="user.status? 'Active': 'Inactive'"></p-tag> </td> </tr> </ng-template> <ng-template pTemplate="emptymessage"> <tr> <td colspan="7">No user found.</td> </tr> </ng-template> </p-table> </div> <router-outlet></router-outlet>

4.2 app.component.scss

:host ::ng-deep { 
	.p-progressbar { 
    	height: .5rem; 
    	background-color: #D8DADC; 
 
    	.p-progressbar-value { 
        	background-color: #607D8B; 
    	} 
	} 
}

4.3 app.component.ts

import { Component, OnInit } from '@angular/core'; 
import { Table } from 'primeng/table'; 
import { Statuses, UserData } from './interfaces/user-data'; 
 
@Component({ 
  selector: 'app-root', 
  templateUrl: './app.component.html', 
  styleUrls: ['./app.component.scss'] 
}) 
export class AppComponent implements OnInit { 
 
  userData: UserData[] = [ 
	{ id: 1, firstName: "Minna", lastName: "Amigon", status: true, email: "minna_amigon@yahoo.com" }, 
	{ id: 2, firstName: "Abel", lastName: "Maclead", status: true, email: "amaclead@gmail.com" }, 
	{ id: 3, firstName: "Kiley", lastName: "Caldarera", status: true, email: "kiley.caldarera@aol.com" }, 
	{ id: 4, firstName: "Graciela", lastName: "Ruta", status: true, email: "gruta@cox.net" }, 
	{ id: 5, firstName: "Cammy", lastName: "Albares", status: true, email: "calbares@gmail.com" }, 
	{ id: 6, firstName: "Mattie", lastName: "Poquette", status: true, email: "mattie@aol.com" }, 
	{ id: 7, firstName: "Meaghan", lastName: "Garufi", status: true, email: "meaghan@hotmail.com" }, 
	{ id: 8, firstName: "Gladys", lastName: "Rim", status: true, email: "gladys.rim@rim.org" }, 
	{ id: 9, firstName: "Yuki", lastName: "Whobrey", status: true, email: "yuki_whobrey@aol.com" }, 
	{ id: 10, firstName: "Fletcher", lastName: "Flosi", status: false, email: "fletcher.flosi@yahoo.com" }, 
	{ id: 11, firstName: "Minna", lastName: "Amigon", status: true, email: "minna_amigon@yahoo.com" }, 
	{ id: 12, firstName: "Abel", lastName: "Maclead", status: true, email: "amaclead@gmail.com" }, 
  ]; 
  statuses: Statuses[] =[ 
	{ label: 'Active', value: true }, 
	{ label: 'Inactive', value: false }, 
  ]; 
  loading: boolean = true; 
  filter!: string; 
  constructor() { } 
 
  ngOnInit() { 
	this.loading = false; 
  } 
 
  clear(table: Table) { 
	this.filter = '' 
	table.clear(); 
  } 
}

5. Update app.module.ts’ file.

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { TableModule } from 'primeng/table'; 
import { MultiSelectModule } from 'primeng/multiselect'; 
import { FormsModule } from '@angular/forms'; 
import { TagModule } from 'primeng/tag'; 
import { ProgressBarModule } from 'primeng/progressbar'; 
import { SliderModule } from 'primeng/slider'; 
import { ButtonModule } from 'primeng/button'; 
import { DropdownModule } from 'primeng/dropdown'; 
import { HttpClientModule } from '@angular/common/http'; 
import { InputTextModule } from 'primeng/inputtext'; 
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 
 
 
 
@NgModule({ 
  declarations: [ 
	AppComponent 
  ], 
  imports: [ 
	FormsModule, 
	BrowserModule, 
	AppRoutingModule, 
	TableModule, 
	MultiSelectModule, 
	TagModule, 
	ProgressBarModule, 
	SliderModule, 
	ButtonModule, 
	DropdownModule, 
	HttpClientModule, 
	InputTextModule, 
	BrowserAnimationsModule  
  ], 
  providers: [ ], 
  bootstrap: [AppComponent] 
}) 
export class AppModule { }

Folder Structure

Output – UI images

2.9 NG-ZORRO

NG-ZORRO is a powerful Angular library for building user interfaces for enterprise apps. Alibaba used Ant Design to create this library, that offers more than 70 components. Its comprehensive internationalization support and professional design system make NG-ZORRO an ideal choice for global projects with complex needs.

NG-ZORRO features:

Professional design
Globalization support
Performance optimized
Extensive components
Well-maintained documentation

NG-ZORRO components:

Basic buttons
Form elements
Modals
Tree views
Complex tables

Installation

Use npm to install NG-ZORRO.

npm install ng-zorro-antd --save

Usage

Configuring NG-ZORRO for your Angular project:

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { AppComponent } from './app.component';
 
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, NzButtonModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

Next step is to add NG-ZORRO styles in angular.json:

"styles": [
  "node_modules/ng-zorro-antd/ng-zorro-antd.min.css",
  "src/styles.css"
]

Now, utilize the NG-ZORRO button in your template:

<!-- app.component.html -->
<button nz-button nzType="primary" (click)="handleClick()">ZORRO Action</button>

2.10 NG Lightning

NG Lightning is an Angular library widely used for Salesforce development. It builds on a native Angular component and the Lightning Design System. The performance experienced by end-users depends heavily on input properties.

NG Lightning Features:

Improved performance
Greater development flexibility
Supports Salesforce development

Installation

Use the following command to install NG Lightning via NPM.

npm install --save ng-lightning

Usage

Once installed, add style files to the angular.json file.

"styles": [
  "node_modules/@salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.min.css",
  "node_modules/@angular/cdk/overlay-prebuilt.css",
],

Import the NG Lightning module to the AppModule to use the required components.

// App Module
 
import {NglModule} from 'ng-lightning';
 
@NgModule({
  imports: [..., NglModule],
  declarations: [AppComponent, ...],
  bootstrap: [AppComponent],
})
 
export class AppModule {}
 
// App Component
 
<button type="button" nglButton variant="base">base</button>

2.11 Clarity

Created by VMware, Clarity is a combination of an HTML/CSS framework, UX guidelines, a set of data-bound Angular components and Figma libraries. This library uses a card-based design, providing card components that enable you to build a modular system. The card components of Clarity are flexible and easy to use.

Clarity features:

Shared visual language
Extensive documentation
API references

Clarity components:

Spinners
Lists and labels
Alerts
Forms and headers
Data Grid
Buttons and Badges
Accordion
Stack View
Dropdowns
Spinners
Input fields and select boxes

2.12 Ignite UI for Angular

Ignite UI is an Angular library providing a large array of native Angular UI components, such as a high-performance Angular Data Grid, along with more than 60 high-performance Angular charts. Developers can use it to build enterprise-grade applications. The library is compatible with the Angular version 19.

Ignite UI features:

CLI tools
Comprehensive documentation
Custom templates
Intuitive APIs
Low-code app builder
GenAI functionality
Bootstrap support

Ignite UI components:

Pivot Grid
Query builder
Dock manager
Data grid
Gauge
Dialog
Treemap
Spreadsheet
Dropdown
Hierarchical grid
Tile manager
Tree grid
Charts
Calendar
Splitter
Datepicker
Icon
Paginator

2.13 Syncfusion Angular UI

Syncfusion, a lightweight UI library, offers over 90 components to create enterprise-grade applications. All the components this user-friendly library offers are responsive, modular and lightweight. Syncfusion also supports selective referencing.

Syncfusion Features

Touch-friendly components
Supports localization and globalization
Customizability
Theme support
Consistent experience

Syncfusion components

Charts
Diagram
PDF Viewer
Kanban
DataGrid
Scheduler
Word Processor
Spreadsheet
Gantt

Installation

To install this package of UI components, run the code below through NPM.

npm i @syncfusion/ej2-angular-base

Usage

Let’s take an example of a checkbox from the UI components offered by Syncfusion and see how it can be implemented.

//component.ts
 
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { CheckBoxComponent } from '@syncfusion/ej2-angular-buttons';
 
@Component({
  selector: 'control-content',
  templateUrl: 'checkbox.html',
  styleUrls: ['checkbox.css'],
  encapsulation: ViewEncapsulation.None
})
 
export class CheckBoxController {
  @ViewChild('checkbox')
  public checkbox: CheckBoxComponent;
 
  constructor(@Inject('sourceFiles') private sourceFiles: any) {
    sourceFiles.files = ['checkbox.css'];
  }
 
  // function to handle the CheckBox change eventpublic changeHandler() : void {
    this.checkbox.label = 'CheckBox: ' + this.checkbox.checked;
  }
}
 
//component.html
 
<div class="control-section">
  <div class="checkbox-control"><div class="row"><ejs-checkbox #checkbox label="CheckBox: true" [checked]="true" (change)="changeHandler()"></ejs-checkbox>
  </div>
 </div>
</div>

3. Conclusion

Now that you’ve reached this point, we hope that we delivered the right information and insightful content on the best Angular component libraries to support your web development project. These popular Angular UI libraries offer polished design systems, flexible themes, custom components, and overall good native Angular components.

Itesh Sharma

Itesh Sharma is core member of Sales Department at TatvaSoft. He has got more than 6 years of experience in handling the task related to Customer Management and Project Management. Apart from his profession he also has keen interest in sharing the insight on different methodologies of software development.

Comments

Leave a message...

Most Popular Angular Component Libraries

1. What is a Component Library?

2. Best Angular Component Libraries

2.1 Angular Material

2.2 NG-BootStrap

2.3 NGX- Bootstrap

2.4 Kendo UI

2.5 Onsen UI

2.6 VaadinUI

2.7 Nebular

2.8 PrimeNG

2.9 NG-ZORRO

2.10 NG Lightning

2.11 Clarity

2.12 Ignite UI for Angular

2.13 Syncfusion Angular UI

3. Conclusion

Categories

Subscribe to our Newsletter

Comments

Subscribe to our Newsletter