Angular PrimeNG Form 列表框样式组件

Angular PrimeNG是一个由PrimeFaces开发和维护的UI组件库。它被世界各地的angular开发人员广泛用于使用AngularJS开发快速和可扩展的Web应用程序。在这篇文章中，我们将看到**Angular PrimeNG表单列表框造型组件。

列表框组件是用来为用户提供一个选项列表，其中可以选择一个或多个选项。总共有五个结构造型类，可以用来根据我们的需要改变列表框组件的样式。

Angular PrimeNG Form Listbox Styling Classes：

p-listbox。该类是Listbox组件的容器元素。
p-listbox-list。这个类是列表的容器。
p-listbox-item。这个类代表了列表框的一个项目。
p-listbox-header。该类是列表框头的容器元素。
p-listbox-filter-container。这个类是列表框过滤器的容器。

还有一些其他的造型属性可以用在表单列表框中，下面将介绍这些属性。

option。这是一个显示为列表框选项的对象数组。
optionLabel。这是将被用作选项标签的属性名称。
styleClass。它是组件的风格类。

语法:

// app.component.html
<p-listbox 
    styleClass="listbox1"
    [options]="sports" 
    [(ngModel)]="chosenSport" 
    optionLabel="name">

    <ng-template pTemplate="header">
        ...
    </ng-template>
</p-listbox>

// app.component.css
:host ::ng-deep .Style-Class {
    // CSS
}

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

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

ng new myapp

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

cd myapp

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

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

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

Angular PrimeNG Form Listbox Styling Component

例子1：在这个例子中，我们使用 “p-listbox-header “类来改变列表框标题的颜色和背景色。

app.component.html

<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG Listbox Styling Component</h3>
  
<h4>Header Color and Background</h4>
  
<p-listbox styleClass="listbox1" 
           [options]="sports"
           [(ngModel)]="chosenSport" 
           optionLabel="name">
    <ng-template pTemplate="header">
        Select a Sport - GFG
    </ng-template>
</p-listbox>

app.component.css

:host ::ng-deep .listbox1 {
    width: 250px;
}
  
:host ::ng-deep .p-listbox-header {
    color: white;
    background-color: green;
    font-weight: bold;
}

app.component.ts

import { Component } from '@angular/core';
  
interface Sport {
    name: string;
    rating: number;
}
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
  
export class AppComponent {
    sports: Sport[] = [];
    chosenSport?: Sport;
  
    ngOnInit() {
        this.sports = [
            {
                name: "Cricket",
                rating: 5
            },
            {
                name: "Hockey",
                rating: 4
            },
            {
                name: "VolleyBall",
                rating: 4
            },
            {
                name: "FootBall",
                rating: 3
            },
            {
                name: "Badminton",
                rating: 4
            }
        ];
    }
}

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 { ListboxModule } from 'primeng/listbox';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        ListboxModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

输出:

Angular PrimeNG Form Listbox Styling Component

例子2：在这个例子中，我们使用ListBox组件的 “p-listbox-list “和 “p-listbox-item “类来改变其风格。

app.component.html

<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG Listbox Styling Component</h3>
  
<h4>Custom Styling</h4>
  
<p-listbox styleClass="listbox1" 
           [options]="sports" 
           [(ngModel)]="chosenSport" 
           optionLabel="name">
    <ng-template pTemplate="header">
        Select a Sport - GFG
    </ng-template>
</p-listbox>

app.component.css

:host ::ng-deep .listbox1 {
    width: 250px;
}
  
:host ::ng-deep .p-listbox-header {
    color: white;
    background-color: green;
    font-size: 20px;
}
  
:host ::ng-deep .p-listbox-list {
    border: 5px solid green;
}
  
:host ::ng-deep .listbox1 .p-listbox-item {
    color: red;
    font-weight: bold;
}

app.component.ts

import { Component } from '@angular/core';
  
interface Sport {
    name: string;
    rating: number;
}
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
  
export class AppComponent {
    sports: Sport[] = [];
    chosenSport?: Sport;
  
    ngOnInit() {
        this.sports = [
            {
                name: "Cricket",
                rating: 5
            },
            {
                name: "Hockey",
                rating: 4
            },
            {
                name: "VolleyBall",
                rating: 4
            },
            {
                name: "FootBall",
                rating: 3
            },
            {
                name: "Badminton",
                rating: 4
            }
        ];
    }
}

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 { ListboxModule } from 'primeng/listbox';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        ListboxModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

输出:

Angular PrimeNG Form Listbox Styling Component