Angular PrimeNG Form MultiSelect Компонент конфигурации анимации

Опубликовано: 24 Февраля, 2023

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

Компонент MultiSelect позволяет пользователям выбирать несколько параметров из набора предоставленных параметров. Свойства конфигурации анимации множественного выбора можно использовать для управления отображением и скрытием анимации панели множественного выбора. Мы можем передать конфигурацию анимации в свойства showTransitionOptions и hideTransitionOptions .

Свойства режима настройки мультиселекта анимации формы Angular PrimeNG:

options: это свойство используется для передачи массива объектов для отображения в качестве параметров множественного выбора.
defaultLabel: это свойство принимает строку, которая отображается в качестве заполнителя компонента MultiSelect.
optionLabel: это свойство принимает строку, которая является именем свойства объекта, которое будет отображаться в качестве метки для параметров MultiSelect.
showTransitionOptions: это свойство используется для настройки свойств отображения перехода компонента MultiSelect.
hideTransitionOptions: это свойство используется для настройки свойств скрытого перехода компонента MultiSelect.

Синтаксис:

<p-multiSelect
    [options]="..." 
    [(ngModel)]="."..
    showTransitionOptions="...
    hideTransitionOptions="..."
    defaultLabel="..."
    optionLabel="...">
</p-multiSelect>

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

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

ng new my_app

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

cd new_app

Шаг 3: Наконец, установите следующие модули в каталог вашего проекта.

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

Структура проекта: Структура проекта будет такой, как показано на рисунке ниже:

Пример 1. В этом примере мы установили для свойства showTransitionOptions значение «3s linear», чтобы панель Multiselect открывалась линейно через 3 секунды и скрывалась со скоростью по умолчанию.

app.component.html

HTML

<h2 style="color: green;">
    GeeksforGeeks
</h2>
<h5>
    Angular PrimeNG Form MultiSelect
    Animation Configuration Component
</h5>
 
<p-multiSelect class="custom-ms"
               [options]="cars"
               [(ngModel)]="selected"
               showTransitionOptions="3s linear"
               defaultLabel="Select Car(s)"
               optionLabel="name">
</p-multiSelect>

app.component.ts

Javascript

import { Component } from "@angular/core";
 
interface Car {
    id: number;
    name: string;
}
 
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styles: [
        `
        :host ::ng-deep .custom-ms
            .p-multiselect-label {
            width: 400px !important;
        }
        `
    ]
})
export class AppComponent {
 
    cars: Car[] = [];
    selected: Car[] = [];
 
    ngOnInit() {
        this.cars = [
            {
                id: 1,
                name: "Vitara Brezza"
            },
            {
                id: 2,
                name: "Audi R8"
            },
            {
                id: 3,
                name: "Swift Dezire"
            },
            {
                id: 4,
                name: "Baleno"
            },
            {
                id: 5,
                name: "Ertiga"
            },
            {
                id: 6,
                name: "Seltos"
            },
        ];
    }
}

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

Выход:

Пример 2: Это еще один пример, иллюстрирующий конфигурацию анимации компонента Multiselect. Здесь мы устанавливаем свойства hideTransitionOptions на «2s linear», поэтому панель Multiselect будет линейно скрываться за 2 с.

app.component.html

HTML

<h2 style="color: green;">
    GeeksforGeeks
</h2>
<h3>
    Angular PrimeNG Form MultiSelect
    Animation Configuration Component
</h3>
 
<h4>
    The Multiselect panel will
    Hide in 2 seconds linearly
</h4>
 
<p-multiSelect class="custom-ms"
               [options]="cars"
               [(ngModel)]="selected"
               hideTransitionOptions="2s linear"
               defaultLabel="Select Car(s)"
               optionLabel="name">
</p-multiSelect>

app.component.ts

Javascript

import { Component } from "@angular/core";
 
interface Car {
    id: number;
    name: string;
}
 
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styles: [
        `
        :host ::ng-deep .custom-ms
            .p-multiselect-label {
            width: 300px !important;
        }
        `
    ]
})
export class AppComponent {
 
    cars: Car[] = [];
    selected: Car[] = [];
 
    ngOnInit() {
        this.cars = [
            {
                id: 1,
                name: "Vitara Brezza"
            },
            {
                id: 2,
                name: "Audi R8"
            },
            {
                id: 3,
                name: "Swift Dezire"
            },
            {
                id: 4,
                name: "Baleno"
            },
            {
                id: 5,
                name: "Ertiga"
            },
            {
                id: 6,
                name: "Seltos"
            },
        ];
    }
}

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

Выход:

Ссылка: https://www.primefaces.org/primeng/multiselect

Technical Scripter Picked AngularJS

Angular PrimeNG Form MultiSelect Компонент конфигурации анимации

HTML

Javascript

Javascript

HTML

Javascript

Javascript

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