Angular PrimeNG Form CascadeSelect Properties Component

Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. This article will show us how to use the Angular PrimeNG Form CascadeSelect Properties Component.

The CascadeSelect Component is used to display a nested structure of options. It is like a Dropdown component where the items have their nested items which the user can select.

Angular PrimeNG Form CascadeSelect Component Properties:

• options: This property is used to define an array of select items to display as the available options.
• optionLabel: This property is used to label the option.
• optionValue: This property is used to define the value of the option.
• optionGroupLabel: This property is used to label the option group.
• optionGroupChildren: This property is used to retrieve the items of the group.
• placeholder: This property is used when no option is selected.
• disabled: This property is used to disable the component.
• dataKey: This property is used to uniquely identify an option.
• tabindex: This property is used to define the index of the element in tabbing order.
• inputId: This property is used to define the unique identity of the input.
• ariaLabelledBy: This property is used to establish relationships between the component and label(s) where its value should be one or more element IDs.
• appendTo: This property defines the Id of the element or “body” for the document to which the overlay should be appended.
• style: This property is used to define the inline style of the component.
• panelStyle: This property is used to define the inline style of the overlay panel.
• styleClass: This property is used to style the class of the component.
• panelStyleClass: This property is used to style the class of the overlay panel.
• inputLabel: This property is used to label the input for accessibility.
• ariaLabel: This property is used to define the string that labels the input for accessibility.
• ariaLabelledBy: This property is used to specify one or more IDs in the DOM that labels the input field.
• showClear: This property is used to display the clear icon to clear the value.

Creating Angular Application & Module Installation:

Step 1: Create an Angular application using the following command.

ng new appname

Step 2: After creating your project folder i.e. appname, move to it using the following command.

cd appname

Step 3: Install PrimeNG in your given directory.

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

Project Structure:

Steps to run the application: Run the below command to see the output

npm run

Example 1: In the below code, we will make use of the above syntax to demonstrate the use of the Angular PrimeNG Form CascadeSelect Properties Component.

• app.component.html:

HTML

<h1 style="color: green">GeeksforGeeks</h1>
<h5>Angular PrimeNG Form CascadeSelect Properties Component.</h5>

<p-cascadeSelect
    [options]="gfg"
    optionLabel="cname"
    optionGroupLabel="name"
    [optionGroupChildren]="['states', 'cities']"
    [style]="{ minWidth: '14rem' }"
    placeholder="Select a City">
</p-cascadeSelect>

• app.component.ts:

Javascript

import { Component } from "@angular/core";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html"
})
export class AppComponent {
    gfg: any[] = [];

    ngOnInit() {
        this.gfg = [
            {
                name: "India",
                code: "AU",
                states: [
                    {
                        name: "Mumbai",
                        cities: [
                            {
                                cname: "Nallasopara",
                                code: "NSP"
                            },
                            {
                                cname: "Mira Road",
                                code: "MR"
                            },
                            {
                                cname: "Dahisar",
                                code: "DHI"
                            }
                        ]
                    },
                    {
                        name: "UP",
                        cities: [
                            {
                                cname: "Varansi",
                                code: "VR"
                            },
                            {
                                cname: "Balia",
                                code: "BA"
                            }
                        ]
                    }
                ]
            },
        ];
    }
}

• app.module.ts:

Javascript

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 {}

Output:

Example 2: Below is another example code that illustrates the use of the Angular PrimeNG Form CascadeSelect Properties Component.

• app.component.html:

HTML

<h1 style="color: green">GeeksforGeeks</h1>
<h5>Angular PrimeNG Form CascadeSelect Properties Component.</h5>

<p-cascadeSelect p-cascadeselect-label
    [options]="gfg"
    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>

• app.component.ts:

Javascript

import { Component } from "@angular/core";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html"
})
export class AppComponent {
    gfg: any[] = [];

    ngOnInit() {
        this.gfg = [
            {
                name: "India",
                code: "AU",
                states: [
                    {
                        name: "Mumbai",
                        cities: [
                            {
                                cname: "Nallasopara",
                                code: "NSP"
                            },
                            {
                                cname: "Mira Road",
                                code: "MR"
                            },
                            {
                                cname: "Dahisar",
                                code: "DHI"
                            }
                        ]
                    },
                    {
                        name: "UP",
                        cities: [
                            {
                                cname: "Varansi",
                                code: "VR"
                            },
                            {
                                cname: "Balia",
                                code: "BA"
                            }
                        ]
                    }
                ]
            },
        ];
    }
}

• app.module.ts:

Javascript

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 {}

Output:

Reference: https://primefaces.org/primeng/cascadeselect