Angular PrimeNG Form Knob Styling 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 Styling 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. There are 3 structural styling classes listed below for the knob component.

Angular PrimeNG Form Knob Styling Classes:

• p-knob: This is the container element of the knob.
• p-knob-text: This is the text element of the knob.
• p-knob-value: This is the value element of the knob.

Angular PrimeNG Form Knob Styling Properties:

• step: It is the value by which the knob value will increase/decrease.
• valueColor: It is the background color of the value.
• rangeColor: It is the background color of the range.
• textColor: It is the color of the value text.
• strokeWidth: It is the stroke width of the knob.
• style: It is the inline style of the component.
• styleClass: It is the style class of the component.

Syntax:

// In File: app.component.html
<p-knob 
    [step]="..."
    textColor="..."
    ...
    [(ngModel)]="...">
</p-knob>

// In file: app.component.css
:host ::ng-deep .StylingClass {
    // CSS
}

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 “p-knob-text” class to change the size and font weight of the knob text. Also, we used the textColor property to change the color of the text to green.

app.component.html

HTML

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

<h4>Normal Knob</h4>
<p-knob [step]="10" [(ngModel)]="knobValue1">
</p-knob>

<h4>Knob with Big and Bold Text</h4>
<p-knob class="knob" [step]="10"
        textColor="green"
        [(ngModel)]="knobValue2">
</p-knob>

app.component.css

CSS

:host ::ng-deep .knob text.p-knob-text {
    font-size: 30px;
    font-weight: bold;
}

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;
    knobValue2?: number;
}

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: In this example, we are using the “p-knob-value” styling class to change the color and the stroke width of the value. Here, we set the color to orange and the stroke width to 5px.

app.component.html

HTML

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

<h4>
    Knob with custom styling using the
    <i>p-knob-value</i> Styling Class
</h4>
<p-knob class="knob" [step]="5"
        [(ngModel)]="knobValue">
</p-knob>

app.component.css

CSS

:host ::ng-deep .knob path.p-knob-value {
    stroke: orange;
    stroke-width: 5px;
}

app.component.ts

Javascript

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

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

export class AppComponent {
    knobValue?: number;
}

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 3: In this example, we used the styling properties to change the range and the value color of the knob component. The orange color has been set to red and the value color is set to green.

app.component.html

HTML

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

<h4>Normal Knob</h4>
<p-knob [step]="10" [(ngModel)]="knobValue1">
</p-knob>

<h4>Knob with Custom Range and Value Color</h4>
<p-knob [step]="10" rangeColor="red"
        valueColor="green" [(ngModel)]="knobValue2">
</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 {
    knobValue1?: number;
    knobValue2?: number;
}

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