Angular PrimeNG Form Knob Size Component
Last Updated :
02 Nov, 2022
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.
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 >
|
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;
}
|
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.
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 >
|
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;
}
|
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
Share your thoughts in the comments
Please Login to comment...