Angular PrimeNG表单旋钮造型组件

Angular PrimeNG是一个为Angular应用程序制作的UI组件集合。它使开发者无需投入太多的时间就能轻松地建立起漂亮而高效的Web界面。在这篇文章中，我们将看到Angular PrimeNG表单旋钮造型组件。

旋钮组件是用来用一个转盘接受用户的数字输入。旋钮的值可以与app.component.ts文件中定义的一个数字变量相绑定。下面列出了旋钮组件的3个结构风格类。

Angular PrimeNG Form Knob造型类：

p-knob：这是旋钮的容器元素。
p-knob-text。这是旋钮的文本元素。
p-knob-value。这是该旋钮的值元素。

Angular PrimeNG Form Knob造型属性：

step。它是指旋钮值增加/减少的数值。
valueColor: 它是数值的背景颜色。
rangeColor: 它是范围的背景颜色。
textColor: 它是数值文本的颜色。
strokeWidth：是指旋钮的笔画宽度。
style。它是该组件的内联样式。
styleClass。这是该组件的风格类。

语法:

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

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

创建Angular应用程序并安装模块：

第1步：使用以下命令创建一个Angular应用程序。

ng new myapp

第2步：创建你的项目文件夹即myapp后，使用以下命令移动到它。

cd myapp

第3步：在你给定的目录中安装PrimeNG。

npm install primeng --save
npm install primeicons --save

项目结构：完成上述步骤后，其结构将如下所示。

Angular PrimeNG表单旋钮造型组件

Project Structure

例子1：在这个例子中，我们使用 “p-knob-text “类来改变旋钮文本的大小和字体重量。此外，我们还使用了textColor属性来改变文本的颜色为绿色。

app.component.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

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

app.component.ts

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

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 { }

输出:

Angular PrimeNG表单旋钮造型组件

例子2：在这个例子中，我们使用 “p-knob-value “造型类来改变数值的颜色和笔画宽度。在这里，我们将颜色设置为橙色，笔画宽度为5px。

app.component.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

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

app.component.ts

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

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 { }

输出:

Angular PrimeNG表单旋钮造型组件

例子3：在这个例子中，我们用造型属性来改变旋钮组件的范围和值的颜色。橙色被设置为红色，值的颜色被设置为绿色。

app.component.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

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

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 { }

输出:

Angular PrimeNG表单旋钮造型组件