Una guía completa para Angular Grid y el desarrollo de aplicaciones Angular
Conozca Angular Data Grid y cómo usarlo consultando esta sección informativa que forma parte de nuestro tema Descripción general de la cuadrícula.
Ignite UI - Our Framework for Angular App Development
Ignite UI for Angular es un conjunto de herramientas avanzado de Infragistics que incluye componentes de UI ricos en funciones y de alto rendimiento, como cuadrículas de datos y otros componentes que incluyen gráficos, mapas de visualización de datos, editores y más.
La cuadrícula de datos Ignite UI Angular se encuentra entre las más rápidas de la industria y es utilizada por muchas de las principales compañías financieras y de seguros.
Construida sobre el marco Angular de Google, Ignite UI proporciona más de 50 componentes de interfaz de usuario y componentes basados en materiales, y más de 50 tipos de gráficos, incluidos gráficos financieros.
Entre sus muchos beneficios, Ignite UI for Angular ofrece una fácil integración, un desarrollo y diseño rápidos y compatibilidad responsiva entre navegadores.
Installing and Creating a Project
Puede instalar Ignite UI for Angular con Angular CLI o con Ignite UI CLI. Para comenzar rápidamente con Angular CLI, ejecute el siguiente comando:
ng add igniteui-angular
Esta es la opción preferida cuando necesita agregar Ignite UI for Angular a una aplicación Angular existente.
Si está creando una nueva aplicación desde cero, le recomendamos el siguiente enfoque:
npm install –g igniteui-cli
Una vez que igniteui cli esté instalado, puede iniciar fácilmente una aplicación siguiendo la experiencia guiada de cli usando Ignite UI CLI o Ignite UI for Angular Schematics, que crea una aplicación configurada que el usuario final puede ejecutar con un solo comando:
ig
Utilice este amplio conjunto de comandos cli para realizar otras funciones, incluida la generación de un proyecto Ignite UI y la adición de un nuevo componente para crear y servir toda la aplicación.
Importing Dependencies
Cuando se trata de importar dependencias de productos, recomendamos encarecidamente utilizar nuestra CLI Ignite UI. Simplemente usando ng add igniteui-angular puede instalar el paquete Ignite UI for Angular, junto con todas sus dependencias, importaciones de fuentes, preferencias de estilos y más en su proyecto.
Para comenzar a usar Ignite UI for Angular sin la CLI Ignite UI, asegúrese de haber configurado todas las dependencias necesarias y haber realizado la configuración adecuada de su proyecto. Puede aprender cómo hacer esto manualmente en el tema Introducción.
Adding Components to a Template
Una vez que termine con la configuración del entorno de desarrollo, puede continuar agregando y configurando otros componentes Ignite UI. A continuación se explica cómo utilizar nuestros esquemas para agregar una cuadrícula con configuración básica y agregar plantillas a algunas de nuestras columnas.
<igx-grid #grid1 [data]="localData" height="600px" (selected)="cellSelection($event)">
<igx-column header="Rank" headerClasses="myClass" width="115px" field="Id" sortable="true" [filterable]="false"></igx-column>
<igx-column field="Name" header="Athlete" width="280"></igx-column>
<igx-column field="Speed" header="Speed" [width]="'190px'" [filterable]="false"></igx-column>
<igx-column field="TrackProgress" sortable="true" header="Track Progress" [filterable]="false">
<ng-template igxCell let-val>
<div class="linear-bar-container">
<igx-linear-bar [textVisibility]="false" class="cell__inner_2" [value]="val"></igx-linear-bar>
</div>
</ng-template>
</igx-column>
<igx-paginator [perPage]="10">
</igx-paginator>
</igx-grid>
La cuadrícula en sí consta de diferentes componentes, como IgxColumnComponent, que se utiliza para definir la colección de columnas de la cuadrícula y habilitar funciones por columna como clasificación y paginación.
Se puede crear una plantilla para cada una de las columnas de la cuadrícula por separado. La columna espera etiquetas ng-template decoradas con una de las directivas del módulo grid.
Configuring Your Components
Ahora que ha definido columnas en nuestra cuadrícula, puede configurar diferentes plantillas de celdas, encabezados y pies de página de la siguiente manera:
- La directiva IgxHeader apunta al encabezado de la columna proporcionando el objeto de la columna como contexto.
<igx-column field="Name">
<ng-template igxHeader let-column>
{{ column.field | uppercase }}
</ng-template>
</igx-column>
igxCell aplica la plantilla proporcionada a todas las celdas de la columna. El objeto de contexto proporcionado en la plantilla consta del valor de celda proporcionado implícitamente y el propio objeto de celda.
La columna también acepta una última plantilla que se utilizará cuando una celda esté en modo de edición. Al igual que con las otras plantillas de columna, el objeto de contexto proporcionado es nuevamente el valor de la celda y el objeto de la celda en sí.
<igx-column field="Price" [dataType]="'number'" editable="true">
<ng-template igxCellEditor let-cell="cell">
<label for="price">
Enter the new price tag
</label>
<input name="price" type="number" [(ngModel)]="cell.editValue" />
</ng-template>
</igx-column>
Adding Data to Your Tables and Charts
Si bien algunas aplicaciones Angular utilizarán datos estáticos, la mayoría del desarrollo de aplicaciones actuales utiliza datos almacenados en una base de datos. El enlace de datos Angular, que es el proceso de establecer una conexión entre la interfaz de usuario de la aplicación y los datos que muestra, es fácil de implementar para permitir tablas dinámicas. Puede configurar el grid para que se vincule a un servicio de datos remoto, que es el escenario común en aplicaciones a gran escala. Una buena práctica es separar toda la lógica relacionada con la obtención de datos en un servicio de datos independiente. A continuación se muestra una forma de crear un servicio que se encargará de recuperar datos del servidor:
El servicio en sí es bastante simple y consta de un método: fetchData que devolverá un Observable<NorthwindRecord[]>.
@Injectable()
export class NorthwindService {
private url = 'http://services.odata.org/V4/Northwind/Northwind.svc/Alphabetical_list_of_products';
constructor(private http: HttpClient) {}
public fetchData(): Observable<NorthwindRecord[]> {
return this.http
.get(this.url)
.pipe(
map(response => response['value']),
catchError(
this.errorHandler('Error loading northwind data', [])
)
);
}
private errorHandler<T>(message: string, result: T) {
return (error: any): Observable<any> => {
console.error(`${message}: ${error.message}`);
return of(result as T);
};
}
}
Después de implementar el servicio, querrás inyectarlo en el constructor de nuestro componente y usarlo para recuperar los datos. El enlace del ciclo de vida ngOnInit es un buen lugar para enviar la solicitud inicial
@Component({
...
})
export class MyComponent implements OnInit {
public records: NorthwindRecord[];
constructor(private northwindService: NorthwindService) {}
ngOnInit() {
this.records = [];
this.northwindService.fetchData().subscribe((records) => this.records = records);
}
}
<igx-grid [data]="records">
<igx-column field="ProductId"></igx-column>
<!-- rest of the column definitions -->
...
</igx-grid>
Consulte nuestro tema Enlace de datos para obtener información más detallada.
La misma técnica de enlace de datos se aplica a los otros componentes Ignite UI, como igxDataChart.
<igx-data-chart [dataSource]="data"
width="700px"
height="500px">
<igx-numeric-x-axis name="xAxis" isLogarithmic="true" ></igx-numeric-x-axis>
<igx-numeric-y-axis name="yAxis" isLogarithmic="true" ></igx-numeric-y-axis>
<igx-bubble-series
name="series1"
[xAxis]="xAxis"
[yAxis]="yAxis"
xMemberPath="population"
yMemberPath="gdpTotal"
radiusMemberPath="gdpPerCapita"
[dataSource]="data" ></igx-bubble-series>
</igx-data-chart>
La configuración de una fuente de datos en el componente del gráfico se aplicará a todas las series, pero también puede configurar diferentes fuentes de datos en cada serie agregada al gráfico de datos.
Sorting, Filtering and Pagination
Las cuadrículas de datos Angular permiten ordenar, filtrar y paginar fácilmente. Con API enriquecidas y una configuración de funciones intuitiva, usar Ignite UI for Angular nunca ha sido tan fácil.
<igx-grid #grid1 (sortingDone)="removeSorting($event)"
[data]="data"
[allowFiltering]="true">
<igx-column field="OrderID" header="Order ID">
</igx-column>
<igx-column field="CategoryName" header="Category Name" [dataType]="'string'" sortable="true">
</igx-column>
<igx-paginator [perPage]="10">
</igx-paginator>
The Grid proporciona tres tipos de filtrado con condiciones de filtrado personalizadas:
Filtre fila por columna con la estrategia de filtrado predeterminada proporcionada de forma inmediata, así como todas las condiciones de filtrado estándar.
Filtrado al estilo de Excel, con un menú configurable de funciones como ordenar, mover, fijar y ocultar funciones.
Filtrado avanzado que proporciona un cuadro de diálogo que permite la creación de grupos con condiciones de filtrado en todas las columnas.
Nuestra versión Angular 9 incluye muchas características clave nuevas, desde análisis de datos hasta una visualización enriquecida, persistencia del estado de la cuadrícula y un widget de temática.
Styling Your Components
Ignite UI tiene las capacidades de estilo más expresivas de los principales marcos Angular.
Con sólo unas pocas líneas de código, puedes cambiar fácilmente el tema de tus componentes. Al estar desarrollada en SASS, la API es sencilla y permite la granularidad de temas en diferentes niveles desde un solo componente, múltiples componentes o todo el conjunto.
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
$primary-color: #2ab759; // Some green shade I like
$secondary-color: #f96a88; // Watermelon pink
$my-color-palette: palette(
$primary: $primary-color,
$secondary: $secondary-color
);
// IMPORTANT: Make sure you always includecore first!
@include core();
// Pass the color palette we generated to thetheme mixin
@include theme($my-color-palette);
Dado que Ignite UI for Angular basa el diseño de sus componentes en los Principios de diseño de materiales, intentamos acercarnos lo más posible a los colores, tamaños, tipografía y la apariencia general de nuestros componentes a los creados por Google. Ejemplo:
¿Te gusta esta muestra? Obtenga acceso a nuestro completo kit de herramientas Angular y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
También queremos mencionar nuestro widget de temas del navegador de muestra. Ahora, puede cambiar temas en tiempo de ejecución en el navegador de muestra Ignite UI con solo un clic. El widget de temática le permite cambiar los estilos, colores, redondez y elevación. La personalización de la temática nunca ha sido tan fácil. Una vez que estés listo con tu tema, simplemente presiona "DESCARGAR SASS" y tendrás tu archivo SCSS a tu disposición y podrás usarlo en tu aplicación:
Data Analysis with Ignite UI
El conjunto de herramientas Ignite Angular UI también incluye capacidades de análisis de datos. Nos esforzamos por brindarle todas las capacidades comerciales que necesitará para brindar excelentes experiencias a sus clientes. Por lo tanto, ahora proporcionamos directivas que le brindarán una experiencia más parecida a la de Excel. Por ejemplo, al seleccionar una parte de los datos, ahora puede hacer clic en un botón y realizar un análisis rápido de ese subconjunto de datos.
Tools for Code Generation and Design
Ignite UI for Angular es parte del sistema Indigo.Design que le permite generar código Angular nativo a partir de diseños creados en Sketch con el kit de interfaz de usuario Indigo.Design. Puede generar una cuadrícula compatible con dispositivos móviles o con gran densidad de datos que admita varios modos de edición y filtrado, pero también puede utilizar muchas de las funciones de cuadrícula populares, como clasificación, paginación, resúmenes y agrupación por. Además, en cada columna puede especificar varias operaciones, como mover, cambiar el tamaño, ocultar y fijar para lograr los escenarios de manipulación de datos más sofisticados en el momento del diseño y tener una interfaz de usuario perfecta en píxeles que se ejecuta en minutos.
Performance Benchmarks
Los componentes de la cuadrícula, en general, están destinados a visualizar grandes cantidades de datos tabulares. Cuando se trata de rendimiento, nuestro Grid sobresale en tiempo de carga, tiempo de ejecución y rendimiento suave.
Para satisfacer los requisitos de una aplicación web en cuanto a tiempo de carga y rendimiento en tiempo de ejecución, es importante virtualizar los elementos del Modelo de objetos de documento (DOM) que se representan e intercambiar o reutilizar elementos DOM cuando el usuario realiza operaciones verticales y horizontales. desplazamiento horizontal en el contenedor del componente. El igxGrid tiene un excelente rendimiento de desplazamiento en tiempo de ajuste sin desgarros visuales, así como un rendimiento suave (definido por la usabilidad general de su software). Aquí hay un ejemplo de un Gif con rendimiento de desplazamiento:
Consulte nuestra cuadrícula y vea lo fácil que es encontrar y navegar hasta la función que desea utilizar, o qué tan atractiva sería su apariencia en su aplicación.
Obtenga más información sobre esto en nuestro artículo Rendimiento medio de software (web).
GitHub