Расположение кнопок Angular PrimeNG OrderList

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

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

Technical Scripter Picked AngularJS

Расположение кнопок Angular PrimeNG OrderList

HTML

Javascript

Javascript

HTML

Javascript

Javascript

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