Angular PrimeNG Form cascade选择模板组件

Angular PrimeNG是一个开源的框架，有丰富的原生Angular UI组件，用来做很好的造型，这个框架用来做响应式的网站，非常方便。这篇文章将告诉我们如何在Angular ngx bootstrap中使用日历组件。

CascadeSelect Templating Component:它用于显示一个可以用选项模板定制的项目内容。

语法:

<p-cascadeSelect >
    <ng-template>
        ...   
       </ng-template>
</p-cascadeSelect>

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

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

ng new appname

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

cd appname

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

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

Project Structure:

示例1：在下面的代码中，我们将使用上述语法来演示Form CascadeSelect Templating Component的使用。

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 
        Templating Component
    </h4>
      
    <h4>Templating</h4>
      
    <p-cascadeSelect p-cascadeselect-label 
        [(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 { }

输出:

示例2：在下面的代码中，我们将使用上述语法来演示Form CascadeSelect Templating Component的使用。

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 
        Templating Component
    </h4>
      
    <h5>Without Templating</h5>
      
    <p-cascadeSelect [(ngModel)]="selectedCity1" 
        [options]="countries" 
        optionLabel="cname" 
        optionGroupLabel="name"
        [optionGroupChildren]="['states', 'cities']" 
        [style]="{'minWidth': '14rem'}" 
        placeholder="Select a City">
    </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 { }

输出: