Angular PrimeNG es un marco de trabajo de código abierto con un amplio conjunto de componentes nativos de la interfaz de usuario de Angular que se utilizan para lograr un gran estilo y este marco se utiliza para crear sitios web receptivos con mucha facilidad. En este artículo, sabremos cómo usar el componente OrderList en Angular PrimeNG. También aprenderemos sobre las propiedades, los eventos y el estilo junto con sus sintaxis que se usarán en el ejemplo de código.
Componente OrderList: Se utiliza para mantener la lista de artículos y productos.
Propiedades:
- valor : Es una array de objetos para reordenar. Acepta el tipo de datos de array y el valor predeterminado es nulo.
- selección : es una array de objetos para vincular las selecciones. Acepta el tipo de datos de array y el valor predeterminado es nulo.
- header : Es el texto de la leyenda. Es de tipo de datos de string y el valor predeterminado es nulo.
- style : Es un estilo en línea del componente. Es de tipo de datos de string y el valor predeterminado es nulo.
- styleClass : Es la clase de estilo del componente. Es de tipo de datos de string y el valor predeterminado es nulo.
- listStyle : es un estilo en línea del elemento de la lista. Es de tipo de datos de string y el valor predeterminado es nulo.
- filterBy : se utiliza para especificar si mostrar un campo de entrada para filtrar los elementos en keyup y decide en qué campos buscar. Es de tipo de datos de string y el valor predeterminado es nulo.
- filterMatchMode : se utiliza para definir cómo se filtran los elementos. Es del tipo de datos de string y el valor predeterminado es contiene.
- filterLocale : se utiliza para establecer la configuración regional que se utilizará en el filtrado. Es del tipo de datos de string y el valor predeterminado no está definido.
- metaKeySelection : se utiliza para especificar si se debe presionar metaKey para seleccionar o descartar el elemento. Acepta el tipo de datos booleano y el valor predeterminado es verdadero.
- dragdrop : se utiliza para especificar si se activa el reordenamiento basado en arrastrar y soltar. Acepta el tipo de datos booleano y el valor predeterminado es falso.
- filterPlaceHolder : Es el texto del marcador de posición. Es de tipo de datos de string y el valor predeterminado es nulo.
- trackBy : es la función para optimizar las operaciones de dom delegando a ngForTrackBy. Es de tipo función y el valor predeterminado es nulo.
- ControlsPosition : Se utiliza para definir la ubicación de los botones con respecto a la lista, los valores válidos son «izquierda» o «derecha». Es del tipo de datos de string y se deja el valor predeterminado.
- ariaFilterLabel : se utiliza para definir una string que etiqueta la entrada del filtro. Es de tipo de datos de string y el valor predeterminado es nulo.
Eventos:
- onReorder : es una devolución de llamada que se activa cuando se reordena la lista.
- onSelectionChange : es una devolución de llamada para invocar cuando cambia la selección.
- onFilterEvent : es una devolución de llamada que se activa cuando se produce el filtrado.
Estilo:
- p-orderlist: Es un elemento contenedor.
- p-orderlist-list: Es un contenedor de listas.
- p-orderlist-item: Es un elemento de lista.
Creación de aplicaciones angulares e instalación de módulos:
Paso 1: Cree una aplicación Angular usando el siguiente comando.
ng new appname
Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la aplicación, muévase a ella con el siguiente comando.
cd appname
Paso 3: Instale PrimeNG en su directorio dado.
npm install primeng --save npm install primeicons --save
Estructura del proyecto: se verá así:
Ejemplo 1: Este es el ejemplo básico que ilustra cómo usar el componente Orderlist.
app.component.html
<h2>GeeksforGeeks</h2>
<p-orderList [value]="product" header="OrderList Component">
<ng-template let-product pTemplate="item">
<div class="product-item">
<div class="product-list-detail">
<h5 class="p-mb-2">{{product}}</h5>
<h6 class="p-mb-2">{{gfg}}</h6>
</div>
</div>
</ng-template>
</p-orderList>
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html'
})
export class AppComponent {
product: string[] = ['Geek1', 'Geek2', 'Geek3', 'Geek4'];
gfg: string[] = ['200'];
}
app.module.ts
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 {}
Producción:
Ejemplo 2: En este ejemplo, utilizaremos la propiedad de arrastrar y soltar en el componente OrderList .
app.component.html
<h2>GeeksforGeeks</h2>
<p-orderList [value]="product"
header="OrderList Component"
dragdrop="true">
<ng-template let-product pTemplate="item">
<div class="product-item">
<div class="product-list-detail">
<h5 class="p-mb-2">{{product}}</h5>
<h6 class="p-mb-2">{{gfg}}</h6>
</div>
</div>
</ng-template>
</p-orderList>
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html'
})
export class AppComponent {
product: string[] = ['Geek1', 'Geek2', 'Geek3', 'Geek4'];
gfg: string[] = ['200'];
}
app.module.ts
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 {}
Producción:
Referencia: https://primefaces.org/primeng/showcase/#/orderlist