Angular PrimeNG表格旋钮属性组件

Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，可以用来做很好的造型，这个框架用来制作响应式网站非常方便。在这篇文章中，我们将了解如何在Angular PrimeNG中使用InputNumber组件。我们还将学习属性、事件、方法和造型，以及代码中使用的语法。

旋钮组件是一个表单组件，用于定义一个拨号器类型的旋钮，其中包含标签和一些数据值。

Angular PrimeNG Form Knob Properties 组件属性：

size。它用于设置组件的尺寸，单位是像素。它是数字数据类型，默认值是100。
disabled。它指定该元素应被禁用。它是布尔数据类型，默认值是false。
readonly: 它用于指定该组件不能被编辑。它是布尔数据类型，默认值是false。
min：用于设置最小边界值。它是数字数据类型，默认值是0。
max:它用于设置最大边界值。它是数字数据类型，默认值是100。
step。用来设置增减值的步长因素。它是数字数据类型，默认值为空。
valueColor: 它用于设置值的背景。它是字符串数据类型，默认值为空。
rangeColor: 它用于设置范围的背景颜色。它是数字数据类型，默认值为空。
textColor: 它用于设置值文本的颜色。它是数字数据类型，默认值为空。
strokeWidth：用于设置旋钮行程的宽度。它是数字数据类型，默认值是14。
showValue。它用于指定是否显示旋钮内的值。它是布尔数据类型，默认值为真。
valueTemplate。它用于设置值的模板字符串。它是字符串数据类型，默认值为value。
style。它用于设置元素的内联样式。它是对象数据类型，默认值为空。
styleClass。它用于设置元素的风格类。它是字符串数据类型，默认值为空。

创建Angular应用程序和模块安装。

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

ng new appname

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

cd appname

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

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

Project Structure:

Angular PrimeNG表格旋钮属性组件

示例1：在下面的代码中，我们将使用上述属性来演示表单旋钮属性组件的使用。

app.component.html

<div style="text-align:center">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <h3>
        A computer science portal for geeks
    </h3>
    <h4>
        Angular PrimeNG Form Knob Properties Component
    </h4>
    <h5>disabled</h5>
    <div class="p-grid p-formgrid">
        <div class="p-field p-col-12 p-md-4">
            <p-knob 
                [(ngModel)]="value3" 
                disabled="true">
            </p-knob>
        </div>
    </div>
</div>

app.component.ts

import { Component } from "@angular/core";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html"
})
export class AppComponent {
    value1: number = 0;
    value2: number = 50;
    value3: number = 75.5;
    value4: number = 10.5;
    value5: number = 40.5;
    value6: number = 60;
    value7: number = 40.5;
}

app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { KnobModule } from "primeng/knob";
  
@NgModule({
    imports: [BrowserModule, BrowserAnimationsModule, KnobModule, FormsModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

输出:

Angular PrimeNG表格旋钮属性组件

示例2：在下面的代码中，我们将使用上述属性来演示表单旋钮属性组件的使用。

app.component.html

<div style="text-align:center">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <h3>
        A computer science portal for geeks
    </h3>
    <h4>
        Angular PrimeNG Form Knob Properties Component
    </h4>
  
    <div class="p-grid p-formgrid">
        <div class="p-field p-col-12 p-md-4">
            <p-knob 
                [(ngModel)]="value4">
            </p-knob>
        </div>
    </div>
</div>

app.component.ts

import { Component } from "@angular/core";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html"
})
export class AppComponent {
    value1: number = 0;
    value2: number = 50;
    value3: number = 75.5;
    value4: number = 10.5;
    value5: number = 40.5;
    value6: number = 60;
    value7: number = 40.5;
}

app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { KnobModule } from "primeng/knob";
  
@NgModule({
    imports: [BrowserModule, BrowserAnimationsModule, KnobModule, FormsModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

输出:

![Angular PrimeNG表格旋钮属性组件](E:\Translate\img\20221111082629.png “Angular PrimeNG表格旋钮属性组件”