Базовый компонент раскрывающегося списка формы Angular PrimeNG

Опубликовано: 25 Декабря, 2022

Angular PrimeNG — это интерфейсный интерфейс пользовательского интерфейса с открытым исходным кодом, разработанный PrimeTek для разработки эффективных и масштабируемых угловых приложений. Использование PrimeNG в своих проектах помогает разработчикам сократить время разработки и сосредоточиться на других важных областях приложения. В этой статье мы увидим базовый компонент Angular PrimeNG Form Dropdown.

В раскрывающемся компоненте мы предоставляем пользователям список параметров, из которых пользователи могут выбрать любой вариант. Обычно он используется при реализации фильтров, запросе страны пользователя и т. д.

Основные свойства раскрывающегося списка формы Angular PrimeNG:

options: это свойство принимает массив объектов для отображения в качестве параметров раскрывающегося списка.
заполнитель: это свойство используется для установки заполнителя для раскрывающегося списка.
showClear: когда для этого свойства установлено значение true, будет отображаться значок очистки, чтобы очистить выбранное значение.
optionLabel: это имя поля метки опции.

Синтаксис:

<p-dropdown 
    [options]="..." 
    [(ngModel)]="..." 
    placeholder="..." 
    optionLabel="..." 
    [showClear]="true | false">
</p-dropdown>

Создание приложения Angular и установка модуля:

Шаг 1: Создайте приложение Angular, используя следующую команду.

ng new appname

Шаг 2: После создания папки проекта, т. е. имени приложения, перейдите к ней с помощью следующей команды.

cd appname

Шаг 3: Наконец, установите PrimeNG в указанный вами каталог.

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

Структура проекта: Структура проекта будет выглядеть следующим образом после выполнения вышеуказанных шагов:

Чтобы запустить указанный выше файл, выполните следующую команду:

ng serve --save

Пример 1: Это простой пример, показывающий использование базового компонента Angular PrimeNG Form Dropdown.

app.component.html

<h2 style="color: green">GeeksforGeeks</h2>
<h4>
  Angular PrimeNG Form
  Dropdown Basic Component
</h4>
  
<p-dropdown [(ngModel)]="selectedCountry" 
            placeholder="Select Your Country" 
            optionLabel="name" 
            [showClear]="true"
            [options]="countries">
</p-dropdown>

app.component.ts

import { Component } from "@angular/core";
  
interface Country {
    name: string;
    code: string;
}
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
})
  
export class AppComponent {
    countries: Country[] = [];
    selectedCountry?: Country;
  
    ngOnInit() {
        this.countries = [
            {
                name: "India",
                code: "+91"
            },
            {
                name: "Nepal",
                code: "+977"
            },
            {
                name: "Bhutan",
                code: "+975"
            },
            {
                name: "Russia",
                code: "+7"
            },
            {
                name: "Bangladesh",
                code: "+880"
            },
            {
                name: "Canada",
                code: "+1"
            }
        ];
    }
}

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 { DropdownModule } from "primeng/dropdown";
  
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        DropdownModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

Выход:

Пример 2. В этом примере мы установили для свойства showClear значение false , чтобы значок очистки не отображался.

app.component.html

<h2 style="color: green">GeeksforGeeks</h2>
<h4>
    Angular PrimeNG Form
    Dropdown Basic Component
</h4>
  
<p-dropdown [(ngModel)]="selectedCountry" 
            placeholder="Select Your Country" 
            optionLabel="name" 
            [showClear]="false"
            [options]="countries">
</p-dropdown>

app.component.ts

import { Component } from "@angular/core";
  
interface Country {
    name: string;
    code: string;
}
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
})
  
export class AppComponent {
    countries: Country[] = [];
    selectedCountry?: Country;
  
    ngOnInit() {
        this.countries = [
            {
                name: "India",
                code: "+91"
            },
            {
                name: "Nepal",
                code: "+977"
            },
            {
                name: "Bhutan",
                code: "+975"
            },
            {
                name: "Russia",
                code: "+7"
            },
            {
                name: "Bangladesh",
                code: "+880"
            },
            {
                name: "Canada",
                code: "+1"
            }
        ];
    }
}

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 { DropdownModule } from "primeng/dropdown";
  
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        DropdownModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

Выход:

Ссылка: http://primefaces.org/primeng/dropdown

Picked AngularJS

Базовый компонент раскрывающегося списка формы Angular PrimeNG

app.component.html

app.component.ts

app.module.ts

app.component.html

app.component.ts

app.module.ts

РЕКОМЕНДУЕМЫЕ СТАТЬИ