Angular - Libraries

---

---

This chapter provides an overview of Angular libraries and commonly used other libraries in Angular projects, including their purposes, advantages, usage, and relevant examples.

Overview of Angular Libraries

Many applications face similar challenges, like providing a consistent user interface, displaying data, and enabling data input. To resolve this issue, developers create universal solutions for specific domains that can be customized and reused across different applications.

Such a solution can be built as Angular libraries and these libraries can be published and shared as npm packages.

An Angular library is a collection of reusable code, components, services, and modules that are packaged together for easy integration into Angular applications. A library is designed to provide functionality that must be imported and used in an application to work.

Unlike the Angular application, a library can not run individual, we need to import and use in our Angular application.

Note! Libraries extend Angular base features. For example, to add reactive forms to our angular application, add the library package using the ng add @angular/forms command, then import the ReactiveFormsModule from the @angular/forms library in your application code.

Why use a Library in Angular?

Using libraries in Angular provides several advantages which are:

• Code Reusability: Libraries allow developers to write reusable code, making it easier to maintain and update across multiple applications.
• Modularity: Libraries help keep applications modular by encapsulating specific functionality, which can be imported only when needed.
• Ready-to-use Code: Libraries provide ready-to-use code, which saves developers time, especially when building large-scale and complex applications.

List of Libraries used with Angular Project

Here, we have listed a few of Angular and other libraries which were commonly used with Angular projects:

• Angular Material
• Angular PrimeNG
• Angular RxJS

Using Angular Material in Angular

Angular Material is a UI library developed by the Angular team to integrate easily with Angular applications. This library is specific to the Angular framework, providing global and accessible components for everyone. It is well-tested to ensure performance and reliability.

It is also provides tools that help developers to build their own custom components with common interaction patterns. The Angular applications developed using Angular Material components ensure "responsiveness" across various screen sizes, such as "phones", "tablets", and "laptops".

Before proceeding with the example, the Angular Material library should be installed in your Angular project. See how to install?

Example

Here is a basic example of using the Angular Material input component.

Step 1: Import the material component API in your component or module where you want to use it (e.g., import in the app module or component):

import { Component} from '@angular/core';
import {MatInputModule} from '@angular/material/input';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [MatInputModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent{
  title = 'my-crud-app';
}

Step 2: Use the Material input component in your template (e.g. app.component.html):

<h3>Angular Material Input Component Example</h3>
<label for="">Favorite Fruit:</label>
<mat-form-field class="example-full-width">
    <input matInput placeholder="Ex. Apple">
</mat-form-field>

Output

The output will appear as follows:

Using PrimeNG in Angular

PrimeNG is a popular UI component library for Angular. Similar to Angular Material, it provides a wide range of ready-to-use, customizable UI components designed to help developers build modern, responsive, and featured web applications quickly.

PrimeNG includes components like "buttons", "data tables", "form controls", "charts", and more, making it a universal choice for Angular development.

Before proceeding with the example, the PrimeNG library should be installed in your Angular project. See how to install?

To properly add the necessary PrimeNG styles in your angular.json file, you should add the following in the styles sections under the build options

"styles": [
   "@angular/material/prebuilt-themes/indigo-pink.css",
   "src/styles.css",
   "node_modules/primeng/resources/themes/lara-light-indigo/theme.css",
   "node_modules/primeng/resources/primeng.min.css",
   "node_modules/primeicons/primeicons.css"
],

Example

The following example will add an input PrimeNG component to your Angular project. For that, we need to import the necessary dependencies as follows:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { InputTextModule } from 'primeng/inputtext';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, InputTextModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'myApp';
}

Add the input component to your template (e.g., app.component.html):

<h1>Welcome to Angular Application</h1>
<p>This is the example of primeng input component</p>
<input type="text" pInputText />

Output

The output of the added component will appear as follows:

Using RxJS in Angular

The RxJS stands for "Reactive Extensions for JavaScript", which is a library for "reactive programming" using observable's that make easier to compose "asynchronous" or "callback-based" code.

In addition, the RxJS library is used to compose the "asynchronous" and "event-based" programs by using observable sequences. It provides one core type, the "Observable", "satellite" types (Observer, Schedulers, Subjects), and "operators" inspired by Array methods (map, filter, reduce, every, etc) to allow handling asynchronous events as collections.

Note!

1. Asynchronous data refers to data that is processed or retrieved at different times, rather than in a sequential or synchronous manner.

2. The RxJS (Reactive Extensions for JavaScript) is not an Angular library, but it is heavily used within Angular.

Example

Here is a simple example that will help you understand reactive programming:

Let's add an event listener the way you normally register in JavaScript:

document.addEventListener('click', () => console.log('You Clicked!'));

Here, let's see how we can add the same event listener using the "RxJS library":

import { fromEvent } from 'rxjs';

fromEvent(document, 'click').subscribe(() => console.log('You Clicked!'));

As you can see in JavaScript, you directly tell the browser what to do when an event happens (like clicking), while in RxJS, you create an "event stream" that you can "subscribe" to, allowing more flexibility and easier management of events.

The RxJS library also makes it easier to handle complex event scenarios, such as filtering or modifying events and automatically cleans up after itself when no longer needed, unlike regular event listeners where you manually need to handle memory and cleanup.