Angular Primeng MeterGroup Component

Angular PrimeNG is an open-source framework that comes with a large collection of native Angular UI components for amazing style. It makes creating responsive websites a breeze. Multiple metrics or progress indicators are often displayed as a series of progress bars using PrimeNG's MeterGroupModule.

The MeterGroup Component is a tool from PrimeNG, a popular library from angular that helps you to create fancy and useful interfaces. The MeterGroup Component lets you display several meters together in one place.

Prerequisites

• HTML, CSS, and JavaScript
• Angular CLI

Approach

Angular PrimeNG Form MeterGroup Properties:

1. value: Display The metergroup's current value.
2. Min: Minimum boundary value.
3. Max: Maximum boundary value.
4. orientation: defines the component's layout; the values "horizontal" and "vertical" are acceptable.
5. labelPosition: Specifies the label position of the component, valid values are 'start' and 'end'.
6. labelOrientation: Specifies the label orientation of the component, valid values are 'horizontal' and 'vertical'.

Syntax:

<p-meterGroup 
[value]="..." 
[max]="..." 
[max]="..."
 [orientation]="..."
 .... 
 [style]="..."></p-meterGroup>

Steps To Implement MeterGroup Component

Step 1: Install Angular CLI

If you haven’t installed Angular CLI yet, install it using the following command

npm install -g @angular/cli

Step 2: Create an Angular application using the following command.

ng new metergroup

Folder Structure

Dependencies

"dependencies": {
 "@angular/animations": "^18.0.0",
 "@angular/common": "^18.0.0",
 "@angular/compiler": "^18.0.0",
 "@angular/core": "^18.0.0",
 "@angular/forms": "^18.0.0",
 "@angular/platform-browser": "^18.0.0",
 "@angular/platform-browser-dynamic": "^18.0.0",
 "@angular/platform-server": "^18.0.0",
 "@angular/router": "^18.0.0",
 "@angular/ssr": "^18.0.0",
 "express": "^4.18.2",
 "primeicons": "^7.0.0",
 "primeng": "^17.18.9",
 "rxjs": "~7.8.0",
 "tslib": "^2.3.0",
 "zone.js": "~0.14.3"
}

Step 3: Install PrimeNG in your given directory.

npm install primeng --save
npm install primeicons --save

Basic MeterGroup Component

App Component

Below mentioned is code example of app component having a HTML file and ts file to display metergroup and import it in imports array.

Output:

Multiple,Icon and Label MeterGroup Component

App Component

Below mentioned is code example of app component having a HTML file and ts file to display metergroup and t=import it in imports array.

Output:

Vertical and min ,max MeterGroup Component

App Component

Below mentioned is code example of app component having a HTML file and ts file to display metergroup and t=import it in imports array.

Output: