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.

<!-- src/app/app.component.html -->
<p-meterGroup [value]="value"></p-meterGroup>

// src/app/app.component.ts
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { MeterGroupModule } from 'primeng/metergroup';
@Component({
    selector: 'app-root',
    standalone: true,
    imports: [RouterOutlet, MeterGroupModule],
    templateUrl: './app.component.html',
    styleUrl: './app.component.css'
})
export class AppComponent {
    title = 'metergroup';
    value = [
        { label: 'Space used', value: 15, color: '#7A1CAC' }
    ];
}

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.

<!-- src/app/app.component.html -->
<p-meterGroup [value]="value" labelPosition="start" labelOrientation="vertical"></p-meterGroup>

//src/app/app.component.ts
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { MeterGroupModule } from 'primeng/metergroup';
@Component({
    selector: 'app-root',
    standalone: true,
    imports: [RouterOutlet, MeterGroupModule],
    templateUrl: './app.component.html',
    styleUrl: './app.component.css'
})
export class AppComponent {
    title = 'metergroup';
    value = [
        { label: 'Apps', color: '#34d399', value: 16, icon: 'pi pi-table' },
        { label: 'Messages', color: '#fbbf24', value: 8, icon: 'pi pi-inbox' },
        { label: 'Media', color: '#60a5fa', value: 24, icon: 'pi pi-image' },
        { label: 'System', color: '#c084fc', value: 10, icon: 'pi pi-cog' }
    ];
}

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.

<!-- src/app/app.component.html -->
<p-meterGroup [value]="value" labelPosition="start" labelOrientation="vertical" orientation="vertical"
    [style]="{ height: '150px' }" [max]="100" [min]="5"></p-meterGroup>

//src/app/app.component.ts
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { MeterGroupModule } from 'primeng/metergroup';
@Component({
    selector: 'app-root',
    standalone: true,
    imports: [RouterOutlet, MeterGroupModule],
    templateUrl: './app.component.html',
    styleUrl: './app.component.css'
})
export class AppComponent {
    title = 'metergroup';
    value = [
        { label: 'Apps', color: '#34d399', value: 16, icon: 'pi pi-table' },
        { label: 'Messages', color: '#fbbf24', value: 8, icon: 'pi pi-inbox' },
        { label: 'Media', color: '#60a5fa', value: 24, icon: 'pi pi-image' },
        { label: 'System', color: '#c084fc', value: 10, icon: 'pi pi-cog' }
    ];
}

Output: