Angular PrimeNG表格旋钮最小和最大分量

Angular PrimeNG是一个用于Angular应用程序的前端UI组件库。它是由PrimeTek开发和维护的。PrimeNG帮助开发者使用预先构建的组件和主题在更短的时间内创建令人惊叹的网页界面。在这篇文章中，我们将讨论angular **PrimeNG表单旋钮最小和最大组件。

表格旋钮组件用于使用拨号器进行数字输入。使用旋钮组件可以使网站更具互动性，并改善用户体验。旋钮的最小值和最大值可以用该组件的min和max属性来指定。旋钮的默认最小值是0，最大值是100。

Angular PrimeNG Form Knob最小和最大组件属性：

step。步长是指旋钮的数值一次性增加或减少的系数。
min：用于设置旋钮的最小值。默认值为0。
max:用来设置旋钮的最小值。默认值为100。
size。此属性用于设置旋钮的大小。默认值为100。
textColor：该属性用于设置旋钮的文本颜色。

语法:

<p-knob 
    [(ngModel)]="val" 
    [min]="..."
    [max]="...">
</p-knob>

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

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

ng new myapp

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

cd myapp

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

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

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

Angular PrimeNG表格旋钮最小和最大分量

例子1：这是一个基本的例子，展示了用户的最大和最小属性的使用。这里我们将最小值设置为50，最大值设置为200。

app.component.html:

<h2 style="color: green">GeeksforGeeks</h2>
<h3>
    Angular PrimeNG Form Knob 
    <br> Maximum and Minimum Component
</h3>
<div class="flex gap-5">
    <div>
        <h4>Default Min And Max</h4>
        <p-knob 
            [(ngModel)]="val1">
        </p-knob>
    </div>
    <div>
        <h4>Custom Min And Max</h4>
        <p-knob 
            [min]="50"
            [max]="200"
            [(ngModel)]="val2">
        </p-knob>
    </div>
</div>

app.component.ts:

import { Component } from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
  
export class AppComponent {
    val1?: number; 
    val2?: 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：在这篇文章中，我们使用了旋钮的大小和textColor属性以及min和max属性来定制旋钮组件的大小和文字颜色。

app.component.html:

<h2 style="color: green">GeeksforGeeks</h2>
<h3>
    Angular PrimeNG Form Knob 
    <br> Maximum and Minimum Component
</h3>
<div class="flex gap-5">
    <div>
        <h4>Min: -50 <br>Max: 50 <br>Size: 90</h4>
        <p-knob
            [size]="90" 
            [min]="-50"
            [max]="50"
            textColor="green"
            [(ngModel)]="val1">
        </p-knob>
    </div>
    <div>
        <h4>Min: 0 <br>Max: 20 <br>Size: 150</h4>
        <p-knob 
            [size]="150" 
            [min]="0"
            [max]="20"
            textColor="red"
            [(ngModel)]="val2">
        </p-knob>
    </div>
    <div>
        <h4>Min: 10 <br>Max: 50 <br>Size: 200</h4>
        <p-knob 
            [size]="200" 
            [min]="10"
            [max]="50"
            textColor="blue"
            [(ngModel)]="val3">
        </p-knob>
    </div>
</div>

app.component.ts:

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 = 10; 
}

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表格旋钮最小和最大分量