Angular PrimeNG Form Knob Events Component

Angular PrimeNG is a collection of UI components made for Angular applications. It makes it easy for developers to build beautiful and efficient web interfaces without investing much time. In this article, we will be seeing the Angular PrimeNG Form Knob Events Component.

The Knob Component is used to take numerical input from the user with a dial. The knob’s value can be bounded to a number variable defined in the app.component.ts file. The Knob component has only one event named onChange which is given below.

Angular PrimeNG Form Knob Events:

• onChange: A callback function can be passed to this event. This callback will be invoked whenever the value of the knob changes.

Angular PrimeNG Form Knob Properties:

• step: This property is used to set the step increment/decrement for the knob. The default value is 1.
• min: This property is used to set the minimum value of the knob.
• max: This property is used to set the maximum value of the knob.

Syntax:

<p-knob 
    (onChange)="callback($event)"
    [(ngModel)]="...">
</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.

Project Structure

Example 1: In this example, we used the onChange event to show a message to the user whenever the value of the knob changes.

• app.component.html

HTML

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

<p-knob
    [step]="10"
    (onChange)="knobOnChange($event)"
    [(ngModel)]="knobValue1">
</p-knob>
<p-toast></p-toast>

• app.component.ts

Javascript

import { Component } from '@angular/core';
import { MessageService } from 'primeng/api';

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

export class AppComponent {
    constructor(private msg: MessageService){}
    knobValue1?: number;

    knobOnChange(val: any)
    {
        this.msg.add({
            severity: "info",
            summary: "New Value: " + val,
            detail: "Knob Value Changed"
        })
    }
}

• 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';
import { ToastModule } from 'primeng/toast';

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

Output:

Example 2: In this example, whenever the value of the knob changes we check if it is less than 75. If it is then we show a Feedback input otherwise we just show a button labeled Submit.

• app.component.html

HTML

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

<h2>Give Rating from 0 to 100</h2>
<p-knob
    [step]="5"
    (onChange)="knobOnChange($event)"
    [(ngModel)]="knobValue1">
</p-knob>

<input
    pInputText
    type="text"
    placeholder="Please give feedback"
    [hidden]="isFeedbackHidden"
/>
<br>
<button
    pButton
    label="Submit"
    style="margin-top: 10px;">
</button>

• app.component.ts

Javascript

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

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

export class AppComponent {
    knobValue1: number = 85;
    isFeedbackHidden = true;

    knobOnChange(val: any)
    {
        val >= 75
        ? this.isFeedbackHidden = true
        : this.isFeedbackHidden = false;
    }
}

• 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';
import { ButtonModule } from 'primeng/button';
import { InputTextModule } from 'primeng/inputtext';

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

Output:

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