Angular PrimeNG Form Knob Size 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 be seeing Angular PrimeNG Form Knob Size 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 size of the Knob component can be controlled using the size property. It accepts a number as its value which is the height and width of the knob component.

Syntax:

<p-knob 
    [size]="..." 
    [(ngModel)]="val">
</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 size property of the knob component to increase its size to 200 pixels. Also, we set the step property to 20.

app.component.html:

HTML

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

<div class="flex gap-5">
    <div>
        <h4>Default Size</h4>
        <p-knob 
            [size]="150" 
            [(ngModel)]="val1">
        </p-knob>
    </div>
    
    <div>
        <h4>Size set to 200 & Step to 20</h4>
        <p-knob 
            [size]="200"
            [step]="20"
            [(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 = 0; 
    val2: 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 example shows three knob components with different steps, colors, and having different sizes.

app.component.html:

HTML

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

<div class="flex gap-5">
    <div>
        <h4>Small(75) Sized</h4>
        <p-knob 
            [size]="75"
            [step]="4"
            valueColor="green" 
            [(ngModel)]="val1">
        </p-knob>
    </div>
    
    <div>
        <h4>Medium(150) Sized</h4>
        <p-knob 
            [size]="150" 
            [step]="10"
            rangeColor="grey"
            [(ngModel)]="val2">
        </p-knob>
    </div>

    <div>
        <h4>Large(250) Sized</h4>
        <p-knob 
            [size]="250" 
            [step]="25"
            rangeColor="skyblue"
            valueColor="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 = 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:

Angular PrimeNG Form Knob Size Component

Explore