Angular PrimeNG Form 多选择样式组件

Angular PrimeNG是一个由PrimeFaces开发的AngularJS组件库。它为开发者提供了从一系列已经实现的主题和UI组件中为他们的应用程序进行选择。在这篇文章中，我们将看到**Angular PrimeNG Form MultiSelect Styling Component。

多选组件允许用户从提供的选项集中选择多个选项。多选组件有9个结构风格类，可以根据自己的需要来定制风格。

Angular PrimeNG Form MultiSelect Styling CSS Classes：

p-multiselect。它是多选组件的容器。
p-multiselect-label-container。它是用于显示所选项目的标签的容器。
p-multiselect-label。它是显示所选项目的标签。
p-multiselect-trigger。该类应用于下拉按钮。
p-multiselect-filter-container。它是多选组件的过滤器输入的容器。
p-multiselect-panel。它是应用于显示多选项目的面板的类。
p-multiselect-items。它是项目列表的容器。
p-multiselect-item。该类适用于多选组件的项目。
p-multiselect-open。它是多选组件在其面板可见时的容器。

有一些属性可以与表单多选一起使用，下面将介绍这些属性。

option。这接受一个对象数组，它将被用来显示多选选项。
optionLabel。这个属性接受选项对象的一个属性，它将被用作选项的标签。
showToggleAll：该属性用于启用/禁用多选题的全部切换复选框。
placeholder。此属性用于传递一个字符串，它将被用作多选的占位符。

语法:

// In app.cpomponent.html
<p-multiSelect

    [options]="..." 
    [(ngModel)]="..."
    optionLabel="..."
    defaultLabel="...">
</p-multiSelect>

// In Styles
:host ::ng-deep .Structural-Styling-Class {
    // Custom Styles
}

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

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

ng new my_app

第2步：创建应用程序后，使用以下命令移动到项目文件夹。

cd new_app

第3步：最后，在你的项目目录中安装以下模块。

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

项目结构：项目结构将显示在以下图片中。

Angular PrimeNG Form MultiSelect Styling Component

Project Structure

例子1：在这个例子中，我们把多选标签的颜色设置为绿色，把标签的字体重量设置为粗体。

app.component.html

<h2 style="color: green;">
    GeeksforGeeks
</h2>
<h5>
    Angular PrimeNG Form MultiSelect
    Styling Component
</h5>
  
<p-multiSelect class="custom-ms" 
               [options]="brands" 
               [(ngModel)]="selectedBrands" 
               optionLabel="name" 
               optionValue="id" 
               defaultLabel="Select Brand(s)">
</p-multiSelect>

app.component.ts

import { Component } from "@angular/core";
interface Brand {
    name: string;
    id: string;
}
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styles: [
        `
        :host ::ng-deep .custom-ms 
            .p-multiselect-label {
            width: 300px !important;
            color: green;
            font-weight: bold;
        }
        `
    ]
})
  
export class AppComponent {
    brands: Brand[] = [];
    selectedBrands: Brand[] = [];
    ngOnInit() {
        this.brands = [
            {
                name: "Adidas",
                id: "sports_1"
            },
            {
                name: "Puma",
                id: "sports_2"
            },
            {
                name: "Nike",
                id: "sports_3"
            },
            {
                name: "HRX",
                id: "sports_4"
            },
  
            {
                name: "Delhivery",
                id: "trans_1"
            },
            {
                name: "DHL",
                id: "trans_2"
            },
            {
                name: "FedEx",
                id: "trans_3"
            }
        ];
    }
}

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

输出:

Angular PrimeNG Form MultiSelect Styling Component

例子2：在这个例子中，我们把下拉按钮的颜色改为绿色，把多选项目的颜色改为红色，并把它们加粗。

app.component.html

<h2 style="color: green;">
    GeeksforGeeks
</h2>
<h3>
    Angular PrimeNG Form MultiSelect 
    Styling Component
</h3>
  
<h4>
    Multiselect with <i>red & bold 
    dropdown trigger and item labels</i> 
</h4>
  
<p-multiSelect
    class="mSelect"
    placeholder="Select Players"
    [options]="people" 
    [showToggleAll]="false"
    [(ngModel)]="selected"
    optionLabel="name"
    optionValue="ranking">
</p-multiSelect>

app.component.css

:host ::ng-deep .mSelect .p-multiselect-label {
    width: 300px !important;
}
  
:host ::ng-deep .mSelect .p-multiselect-item {
    color: red;
    font-weight: bold;
}
  
:host ::ng-deep .mSelect .p-multiselect-trigger {
    color: red;
    font-weight: bold;
}

app.component.ts

import { Component } from "@angular/core";
  
interface Person {
    ranking: number;
    name: string;
}
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ['app.component.css']
})
  
export class AppComponent {
    people: Person[] = [];
    selected: Person[] = [];
  
    ngOnInit() {
        this.people = [
            {
                name: "Alex",
                ranking: 1
            },
            {
                name: "Smith",
                ranking: 2
            },
            {
                name: "Krishna",
                ranking: 3
            },
            {
                name: "Shane",
                ranking: 4
            },
            {
                name: "Tom",
                ranking: 5
            },
            {
                name: "Sebastian",
                ranking: 6
            },
            {
                name: "Tushar",
                ranking: 7
            }
        ];
    }
}

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

输出:

Angular PrimeNG Form MultiSelect Styling Component