Angular PrimeNG Form Knob Events Component
Last Updated :
27 Oct, 2022
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.
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 >
|
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"
})
}
}
|
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.
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 >
|
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 ;
}
}
|
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
Share your thoughts in the comments
Please Login to comment...