Компонент привязки значения выпадающего списка формы Angular PrimeNG
Angular PrimeNG — это интерфейсная библиотека пользовательского интерфейса с открытым исходным кодом, в которой есть множество собственных компонентов пользовательского интерфейса Angular, которые помогают разработчикам создавать быстрое и масштабируемое веб-решение. В этой статье мы увидим компонент привязки раскрывающегося списка форм Angular PrimeNG.
Компонент раскрывающегося списка форм предоставляет пользователю список параметров, из которых пользователь может выбрать любой вариант. Свойство optionValue раскрывающегося списка можно использовать для указания свойства модели, которое будет использоваться в качестве значения.
Свойства привязки раскрывающегося списка формы Angular PrimeNG:
- options: это свойство принимает массив объектов для отображения параметров раскрывающегося списка.
- scrollHeight: определяет высоту прокрутки раскрывающейся панели наложения.
- optionLabel: это свойство объекта option для отображения в виде метки раскрывающегося списка.
- optionValue: это свойство объекта опции, отображаемое в виде раскрывающегося значения опции.
Синтаксис:
<p-dropdown
[options]="..."
optionValue="..."
[(ngModel)]="..."
optionLabel="...">
</p-dropdown>Создание приложения Angular и установка модуля:
Шаг 1: Создайте приложение Angular, используя следующую команду.
ng new appname
Шаг 2: После создания папки проекта, т. е. имени приложения, перейдите к ней с помощью следующей команды.
cd appname
Шаг 3: Наконец, установите PrimeNG в указанный вами каталог.
npm install primeng --save npm install primeicons --save
Структура проекта: Структура проекта будет выглядеть следующим образом после выполнения вышеуказанных шагов:
Пример 1. В этом примере мы привязали значение раскрывающегося списка к свойству id автомобиля, установив для параметра optionValue значение «id».
- приложение.component.html:
HTML
<h1 style="color:green">GeeksforGeeks</h1><h3> Angular PrimeNG Form Dropdown Value Binding</h3><h3>Value binded to <i>id </i>poperty of the Car</h3> <p-dropdown [options]="availableCars" [(ngModel)]="selectedCar" optionLabel="name" optionValue="id"></p-dropdown><h4>Selected Car ID: {{selectedCar}}</h4> |
- app.component.ts:
Javascript
import { Component } from "@angular/core"; interface Car{ id: Number; name: String; val: String;} @Component({ selector: "app-root", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"],}) export class AppComponent { availableCars: Car[] = []; selectedCar: Car = this.availableCars[0]; ngOnInit() { this.availableCars = [ { id: 1, name: "Vitara Brezza", val: "VITARA" }, { id: 2, name: "Mahindra Thar", val: "THAR" }, { id: 3, name: "Tata Nexon", val: "NEXON" }, { id: 4, name: "Toyota Fortuner", val: "FORTUNER" }, { id: 5, name: "Hyundai Creta", val: "CRETA" }, { id: 6, name: "Maruti Baleno", val: "BALENO" }, { id: 7, name: "Maruti Ertiga", val: "ERTIGA" } ]; }} |
- app.module.ts:
Javascript
import { NgModule } from "@angular/core";import { BrowserModule } from "@angular/platform-browser";import { HttpClientModule } from "@angular/common/http";import { BrowserAnimationsModule } from "@angular/platform-browser/animations";import { AppComponent } from "./app.component";import { FormsModule } from "@angular/forms";import { DropdownModule } from "primeng/dropdown"; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, HttpClientModule, FormsModule, DropdownModule ], declarations: [AppComponent], bootstrap: [AppComponent]})export class AppModule { } |
Выход:
Пример 2. В приведенном ниже примере в качестве значения используется свойство val автомобиля. Для свойства optionValue раскрывающегося списка установлено значение «val».
- приложение.component.html:
HTML
<h1 style="color:green">GeeksforGeeks</h1><h3> Angular PrimeNG Form Dropdown Value Binding</h3><h3>Value binded to <i>val </i>poperty of the Car</h3> <p-dropdown [options]="availableCars" optionValue="val" [(ngModel)]="selectedCar" scrollHeight="300px" optionLabel="name"></p-dropdown> <h4>Selected Car Val: {{selectedCar}}</h4> |
- app.component.ts:
Javascript
import { Component } from "@angular/core"; interface Car{ id: Number; name: String; val: String;} @Component({ selector: "app-root", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"],}) export class AppComponent { availableCars: Car[] = []; selectedCar: Car = this.availableCars[0]; ngOnInit() { this.availableCars = [ { id: 1, name: "Vitara Brezza", val: "VITARA" }, { id: 2, name: "Mahindra Thar", val: "THAR" }, { id: 3, name: "Tata Nexon", val: "NEXON" }, { id: 4, name: "Toyota Fortuner", val: "FORTUNER" }, { id: 5, name: "Hyundai Creta", val: "CRETA" }, { id: 6, name: "Maruti Baleno", val: "BALENO" }, { id: 7, name: "Maruti Ertiga", val: "ERTIGA" } ]; }} |
- app.module.ts:
Javascript
import { NgModule } from "@angular/core";import { BrowserModule } from "@angular/platform-browser";import { HttpClientModule } from "@angular/common/http";import { BrowserAnimationsModule } from "@angular/platform-browser/animations";import { AppComponent } from "./app.component";import { FormsModule } from "@angular/forms";import { DropdownModule } from "primeng/dropdown"; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, HttpClientModule, FormsModule, DropdownModule ], declarations: [AppComponent], bootstrap: [AppComponent]})export class AppModule { } |
Выход:
Ссылка: https://www.primefaces.org/primeng/dropdown