Angular PrimeNG Form Knob Minimum and Maximum Component

Angular PrimeNG is a front-end UI component library for Angular Applications. It is developed and maintained by PrimeTek. PrimeNG helps developers to create stunning web interfaces in less time using pre-built components and themes. In this article, we will discuss the angular PrimeNG Form Knob Minimum and Maximum Component.

The Form Knob component is used to take number inputs using a dial. Using the Knob component makes the website more interactive and betters the user experience. The minimum and maximum value of the knob can be specified using the min and max properties of the component. The default minimum value of the knob is 0 and the maximum value is 100.

Angular PrimeNG Form Knob Minimum and Maximum Component Properties:

• step: The step is the factor by which the value of the knob will increase or decrease in one go.
• min: This is used to set the minimum value of the knob. The default value is 0.
• max: This is used to set the minimum value of the knob. The default value is 100.
• size: This property is used to set the size of the knob. The default value is 100.
• textColor: This property is used to set the color of the text of the knob.

Syntax:

<p-knob 
    [(ngModel)]="val" 
    [min]="..."
    [max]="...">
</p-knob>

Creating Angular application and Installing the Modules:

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

ng new myapp

Step 2: After creating your project folder i.e. myapp, move to it using the following command.

cd myapp

Step 3: Install PrimeNG in your given directory.

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

Project Structure: After completing the above steps, the structure will look like the following:

Example 1: This is a basic example showing the use of the max and min properties of the user. Here we set the minimum value to 50 and the maximum value to 200.

• app.component.html:

HTML

<h2 style="color: green">GeeksforGeeks</h2>
<h3>
    Angular PrimeNG Form Knob
    <br> Maximum and Minimum Component
</h3>
<div class="flex gap-5">
    <div>
        <h4>Default Min And Max</h4>
        <p-knob
            [(ngModel)]="val1">
        </p-knob>
    </div>
    <div>
        <h4>Custom Min And Max</h4>
        <p-knob
            [min]="50"
            [max]="200"
            [(ngModel)]="val2">
        </p-knob>
    </div>
</div>

• app.component.ts:

Javascript

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})

export class AppComponent {
    val1?: number;
    val2?: number;
}

• app.module.ts:

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { KnobModule } from 'primeng/knob';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        KnobModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

Output:

Example 2: In this article, we used the size and textColor properties of the knob along with the min and max properties to customize the size and text color of the knob component.

• app.component.html:

HTML

<h2 style="color: green">GeeksforGeeks</h2>
<h3>
    Angular PrimeNG Form Knob
    <br> Maximum and Minimum Component
</h3>
<div class="flex gap-5">
    <div>
        <h4>Min: -50 <br>Max: 50 <br>Size: 90</h4>
        <p-knob
            [size]="90"
            [min]="-50"
            [max]="50"
            textColor="green"
            [(ngModel)]="val1">
        </p-knob>
    </div>
    <div>
        <h4>Min: 0 <br>Max: 20 <br>Size: 150</h4>
        <p-knob
            [size]="150"
            [min]="0"
            [max]="20"
            textColor="red"
            [(ngModel)]="val2">
        </p-knob>
    </div>
    <div>
        <h4>Min: 10 <br>Max: 50 <br>Size: 200</h4>
        <p-knob
            [size]="200"
            [min]="10"
            [max]="50"
            textColor="blue"
            [(ngModel)]="val3">
        </p-knob>
    </div>
</div>

• app.component.ts:

Javascript

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})

export class AppComponent {
    val1: number = 0;
    val2: number = 0;
    val3: number = 10;
}

• app.module.ts:

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { KnobModule } from 'primeng/knob';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        KnobModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

Output:

Reference: https://www.primefaces.org/primeng/knob