Angular PrimeNG Form Listbox Templates

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. In this article, we will see how to use the ListBox Component in Angular PrimeNG.

The ListBox Component is used to make a list component from which we can select one or more items and can also be discarded if the item is not required by unchecking in the list. The Templates like header, footer, etc, are used to put some content on some pre-structured containers.

Syntax:

<p-listbox [options]="..." 
    [(ngModel)]="..." 
    optionLabel="..." 
    <ng-template let-group pTemplate="..">
        ...
    </ng-template>
</p-listbox>

Angular PrimeNG Form Listbox Templates Component:

• item: It denotes the item of the ListBox.
• group: It denotes whether to render an option as grouped while nested options are given.
• header: It is the component’s value. It is used to configure the template at the header.
• filter: While specified in the ListBox, it will display a filter input at the header.
• empty: It is used to specify when there is no data.
• emptyfilter: It is used to specify when filtering does not return any results.
• footer: It is the component’s value. It is used to configure the template at the footer.

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: After completing the above processes, it will look like the following:

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

ng serve --save

Example 1: In the below code, we will use the header value to demonstrate Form Listbox Templates Component.

• app.component.html:

HTML

<div style="text-align:center">
    <h2 style="color:green">
          GeeksforGeeks
      </h2>
    <h5>
      Angular PrimeNG Form Listbox Templates Component
      </h5>
    <p-listbox [options]="gfg"
               [(ngModel)]="Course"
               optionLabel="name"
               [style]="{ width: '15rem' }">
      <ng-template let-group pTemplate="header">
            Header Content
      </ng-template>
    </p-listbox>
</div>

• app.component.ts:

Javascript

import { Component } from '@angular/core';
import { PrimeNGConfig, SelectItemGroup } from 'primeng/api';

interface gfg {
    name: string;
}

interface Course {
    name: string;
}

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styles: [
        `
        :host ::ng-deep .ui-listbox {
          width: 20em;
        }
      `,
    ],
})

export class AppComponent {
    gfg: Course[];
    selectedCourse: Course;

    constructor(private primengConfig: PrimeNGConfig) {
        this.gfg = [
            { name: 'HTML5' },
            { name: 'JavaScript' },
            { name: 'Java' },
            { name: 'AngularJS' },
        ];
    }

    ngOnInit() {
        this.primengConfig.ripple = true;
    }
}

• 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 { ListboxModule } from "primeng/listbox";

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ListboxModule, FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})

export class AppModule {}

Output:

Example 2: In the below code, we will use the footer value to demonstrate Form Listbox Templates Component.

• app.component.html:

HTML

<div style="text-align:center">
    <h2 style="color:green">
          GeeksforGeeks
      </h2>
    <h5>
      Angular PrimeNG Form Listbox Templates Component
      </h5>
    <p-listbox [options]="gfg"
               [(ngModel)]="Course"
               optionLabel="name"
               [style]="{ width: '15rem' }">
        <ng-template let-group pTemplate="footer">
              Footer Content
          </ng-template>
    </p-listbox>
</div>

• app.component.ts:

Javascript

import { Component } from '@angular/core';
import { PrimeNGConfig, SelectItemGroup }
    from 'primeng/api';

interface gfg {
    name: string;
}

interface Course {
    name: string;
}

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styles: [
        `
        :host ::ng-deep .ui-listbox {
          width: 20em;
        }
      `,
    ],
})

export class AppComponent {
    gfg: Course[];
    selectedCourse: Course;

    constructor(private primengConfig: PrimeNGConfig) {
        this.gfg = [
            { name: 'HTML5' },
            { name: 'JavaScript' },
            { name: 'Java' },
            { name: 'AngularJS' },
        ];
    }

    ngOnInit() {
        this.primengConfig.ripple = true;
    }
}

• 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 { ListboxModule } from "primeng/listbox";

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ListboxModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})

export class AppModule {}

Output:

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