Angular PrimeNG Form Knob Step 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 Step 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 Knob step is a facto by which the value of the Knob will increase or decrease in one change. 

Angular PrimeNG Form Knob Step Component Properties:

• step: The step is the factor by which the value of the knob will increase or decrease in one go.
• size: This property is used to set the size of the knob. The default value is 100.
• valueColor: This is used to set the color of the knob value.
• rangeColor: This is used to set the color of the knob range.
• 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.

Syntax:

<p-knob 
    [(ngModel)]="val" 
    [step]="...">
</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: In this example, we used the step property to set the knob step to 15. Also, we used the max and min property of the knob to set the maximum and minimum values of the knob to 45 and -45 respectively.

• app.component.html:

HTML

<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG Form Knob Step Component</h3>

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

• app.component.ts:

Javascript

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

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

export class AppComponent {
    val: number = 0;
}

• 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: This is another example illustrating the step property of the knob component. We also set the different colors for the knob using the valueColor and the rangeColor properties.

• app.component.html:

HTML

<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG Form Knob Step Component</h3>

<div class="flex gap-5">
    <div>
        <h4>Knob Step set to 25</h4>
        <p-knob
            [size]="150"
            [(ngModel)]="val1"
            [step]="25">
        </p-knob>
    </div>

    <div>
        <h4>Knob Step set to 5</h4>
        <p-knob
            [size]="150"
            [(ngModel)]="val2"
            valueColor="green"
            rangeColor="red"
            [step]="5">
        </p-knob>
    </div>

    <div>
        <h4>Knob Step set to 10</h4>
        <p-knob
            [size]="150"
            [(ngModel)]="val3"
            valueColor="brown"
            rangeColor="grey"
            [step]="10">
        </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 = 0;
}

• 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