Расположение кнопок Angular PrimeNG OrderList
Angular PrimeNG — это фреймворк с открытым исходным кодом с богатым набором собственных компонентов пользовательского интерфейса Angular, которые используются для отличного стиля, и этот фреймворк используется для очень легкого создания адаптивных веб-сайтов. В этой статье мы увидим, как использовать расположение кнопок OrderList в Angular PrimeNG.
Компонент списка заказов используется для ведения списка предметов и продуктов. Расположение кнопок можно использовать для управления порядком отображения списка, и по умолчанию оно выравнивается по левому краю. Чтобы настроить расположение по умолчанию, можно использовать свойствоcontrolsPosition . Альтернативная позиция, которая доступна, является правильной.
Синтаксис:
<p-orderList [value]="value" controlsPosition="left">
Создание приложения Angular и установка модуля:
Шаг 1: Создайте приложение Angular, используя следующую команду.
ng new appname
Шаг 2: После создания папки проекта, т. е. имени приложения, перейдите к ней с помощью следующей команды.
cd appname
Шаг 3: Установите PrimeNG в указанный вами каталог.
npm install primeng --save npm install primeicons --save
Структура проекта : это будет выглядеть следующим образом:
Пример 1: В этом примере описывается базовое использование расположения кнопок OrderList в Angular PrimeNG, где мы используем свойство controlPosition , для которого установлено значение right.
- app.component.html
HTML
< div id = "GFG" > < h1 style = "color:green" > GeeksforGeeks </ h1 > < h2 >OrderList Buttons Location</ h2 > < div style = "width:50%; " > < p-orderList [value]="product" header = "Selling the Alphabets" controlsPosition = "right" > < ng-template let-product pTemplate = "item" > < div class = "product-item" > < div class = "product-list-detail" > < h5 class = "p-mb-2" > {{product.title}} </ h5 > < h6 class = "p-mb-2" > {{product.cost}} </ h6 > </ div > </ div > </ ng-template > </ p-orderList > </ div > </ div > |
- app.component.ts
Javascript
import { Component } from "@angular/core" ; @Component({ selector: "app-root" , templateUrl: "./app.component.html" , }) export class AppComponent { title = "GFG" ; product: any[] = [ { title: "A" , cost: "200" }, { title: "B" , cost: "300" }, { title: "C" , cost: "400" }, { title: "D" , cost: "500" }, ] } |
- app.module.ts
Javascript
import { NgModule } from "@angular/core" ; import { BrowserModule } from "@angular/platform-browser" ; import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ; import { AppComponent } from "./app.component" ; import { OrderListModule } from "primeng/orderlist" ; @NgModule({ imports: [BrowserModule, BrowserAnimationsModule, OrderListModule], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } |
Выход:
Пример 2. В этом примере мы будем использовать свойство controlPosition , установив его значение по умолчанию как left .
- app.component.html
HTML
< div id = "GFG" > < h1 style = "color:green" > GeeksforGeeks </ h1 > < h2 >OrderList Buttons Location</ h2 > < div style = "width:50%; " > < p-orderList [value]="product" header = "Selling the Alphabets" controlsPosition = "left" > < ng-template let-product pTemplate = "item" > < div class = "product-item" > < div class = "product-list-detail" > < h5 class = "p-mb-2" > {{product.title}} </ h5 > < h6 class = "p-mb-2" > {{product.cost}} </ h6 > </ div > </ div > </ ng-template > </ p-orderList > </ div > </ div > |
- app.component.ts
Javascript
import { Component } from "@angular/core" ; @Component({ selector: "app-root" , templateUrl: "./app.component.html" , }) export class AppComponent { title = "GFG" ; product: any[] = [ { title: "A" , cost: "200" }, { title: "B" , cost: "300" }, { title: "C" , cost: "400" }, { title: "D" , cost: "500" }, ] } |
- app.module.ts
Javascript
import { NgModule } from "@angular/core" ; import { BrowserModule } from "@angular/platform-browser" ; import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ; import { AppComponent } from "./app.component" ; import { OrderListModule } from "primeng/orderlist" ; @NgModule({ imports: [BrowserModule, BrowserAnimationsModule, OrderListModule], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } |
Выход:
Ссылка: http://primefaces.org/primeng/orderlist