Here we are going to see PrimeNG 8 dropdown component example with Angular 8.
First Create an Angular project PrimeNGDropDown and then generate Orders Component using the following command,
ng g c orders
where g is shorthand for generate and c is shorthand for create.
\PrimeNGWorkspace\PrimeNGDropDown> ng g c orders
CREATE src/app/orders/orders.component.html (21 bytes)
CREATE src/app/orders/orders.component.spec.ts (628 bytes)
CREATE src/app/orders/orders.component.ts (270 bytes)
CREATE src/app/orders/orders.component.scss (0 bytes)
UPDATE src/app/app.module.ts (826 bytes)
Benefit of above command is that it will automatically update the app module component.
Before working on Orders Component, create the Orders interface.
export interface Orders {
name: string;
type: string;
}
In Orders component set the array for dropdown.
import { Component, OnInit } from '@angular/core';
import { Orders } from '../orders';
@Component({
selector: 'app-orders',
templateUrl: './orders.component.html',
styleUrls: ['./orders.component.scss']
})
export class OrdersComponent implements OnInit {
orders: Orders[];
purchasedOrder: string;
constructor() {
this.orders = [
{name: 'Apple', type: 'Fruit'},
{name: 'Pencil', type: 'Stationery'},
{name: 'Book', type: 'Stationery'},
{name: 'Cake', type: 'Bakery'},
{name: 'Vermicelli', type: 'Pasta'},
{name: 'Rice', type: 'Cereal Grain'},
{name: 'Cheese', type: 'Dairy'}
];
}
ngOnInit() {
}
}
In Orders Component HTML file add the below code,
<strong>Grocery Order App</strong> <br><br>
Grocery : <p-dropdown [options]="orders" [(ngModel)]="purchasedOrder" optionLabel="name"></p-dropdown>
Run http://localhost:4200/order to see the output as shown in the screenshot.