Angular PrimeNG Form CascadeSelect造型组件

Angular PrimeNG是一个开源框架，它有丰富的原生Angular UI组件，可以用来做很好的造型，这个框架用来做响应式网站，非常方便。在这篇文章中，我们将看到如何在Angular PrimeNG中使用Form CascadeSelect造型组件。

CascadeSelect Styling用于显示选项的嵌套结构并提供不同的风格。

Angular PrimeNG Form CascadeSelect造型组件：

p-cascadeselect。这个造型是用来定义容器元素的。
p-cascadeselect-label。该造型用于定义显示所选选项的标签的元素。
p-cascadeselect-trigger。这个造型是用来定义图标元素的。
p-cascadeselect-panel。这个造型是用来定义图标元素的。
p-cascadeselect-items-wrapper。该样式用于定义项目列表的包装元素。
p-cascadeselect-items。该造型用于定义项目的列表元素。
p-cascadeselect-item。该造型用于定义列表中的项目。

语法:

<p-cascadeSelect>...</p-cascadeSelect>

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

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

ng new appname

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

cd appname

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

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

项目结构:

Angular PrimeNG Form CascadeSelect造型组件

示例1：在下面的代码示例中，我们将利用上述造型来演示Form CascadeSelect造型组件。

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 CascadeSelect Styling Component
    </h4>
    <h5>Basic</h5>
    <p-cascadeSelect [(ngModel)]="course1" 
                     [options]="course" 
                     optionLabel="chapter" 
                     optionGroupLabel="name"
                     [optionGroupChildren]="['sub', 'chapter']" 
                     [style]="{ minWidth: '14rem' }"
                     placeholder="Select a chapter">
    </p-cascadeSelect>
</div>

app.component.ts

import { Component } from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
export class AppComponent {
    course: any[];
    course1: any;
  
    ngOnInit() {
        this.course = [
            {
                name: 'Opertating System',
                code: 'OS',
                sub: [
                    {
                        name: 'Types of Operating System',
                        chapter: [
                            { chapter: 'Batch Operating System ' },
                            { chapter: ' Time-Sharing Operating Systems' },
                            { chapter: 'Distributed Operating System' },
                        ],
                    },
                ],
            },
        ];
    }
}

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

输出:

Angular PrimeNG Form CascadeSelect造型组件

示例2：在下面的代码示例中，我们将利用上述造型来演示Form CascadeSelect造型组件。

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 CascadeSelect Styling Component
    </h4>
  
    <p-cascadeSelect p-cascadeselect-label="cname" 
                     [(ngModel)]="selectedCity2" 
                     [options]="countries" 
                     optionLabel="cname"
                     optionGroupLabel="name" 
                     [optionGroupChildren]="['states', 'cities']" 
                     [style]="{ minWidth: '14rem' }"
                     placeholder="Select a City">
        <ng-template pTemplate="option" let-option>
            <div class="country-item">
                <i class="pi pi-compass p-mr-2" 
                   *ngIf="option.cities"></i>
                <i class="pi pi-map-marker p-mr-2" 
                   *ngIf="option.cname"></i>
                <span>{{ option.cname || option.name }}</span>
            </div>
        </ng-template>
    </p-cascadeSelect>
</div>

app.component.ts

import { Component } from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
export class AppComponent {
    countries: any[];
    selectedCity1: any;
    selectedCity2: any;
  
    ngOnInit() {
        this.countries = [
            {
                name: 'INDIA',
                code: 'IND',
                states: [
                    {
                        name: 'UP',
                        cities: [
                            { cname: 'Varanasi', code: 'A-SY' },
                            { cname: 'Kanpur', code: 'A-NE' },
                            { cname: 'Ayodhya', code: 'A-WO' },
                        ],
                    },
                    {
                        name: 'Maharashtra',
                        cities: [
                            { cname: 'Mumbai', code: 'MUM' },
                            { cname: 'Pune', code: 'Pune' },
                        ],
                    },
                ],
            },
        ];
    }
}

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