igniteui angular wrappers
17.0.0
igniteui-angular en su lugar! Use los componentes que se encuentran en projectsigniteui-angular-wrapperssrcpublic-api.ts para usar los controles Ignite UI en aplicaciones angulares. Trabaja con las muestras en ejecución aquí.
Importante El repositorio ha sido renombrado de igniteui-angular2 a igniteui-angular-wrappers . Lea más sobre nuestra nueva convención de nombres.
Para ejecutar las muestras, necesita Node.js instalado en su máquina. Posteriormente, desde su terminal ejecuta los siguientes comandos:
git clone https://github.com/IgniteUI/igniteui-angular-wrapperscd igniteui-angular-wrappersnpm installnpm start igniteui-angular-wrappers depende del paquete con licencia ignite-ui-full . Siga esta guía para configurar el acceso a la alimentación de NPM privada de Ignite UI y agregue la dependencia al package.json .
"dependencies": {
"@infragistics/ignite-ui-full": "latest"
}
Para comenzar con el Ignite UI CLI y los envoltorios angulares Ignite UI:
npm i -g igniteui-cli
ig new <project name> --framework=angular --type=ig-ts
cd <project name>
ig add combo <component name>
ig start
En una aplicación angular, los controles de IU de Ignite admiten la inicialización de marcado que se realiza mediante el uso de etiquetas personalizadas.
Cada control implementa un componente de etiqueta personalizado donde se forma el nombre de la etiqueta dividiendo cada letra mayúscula en el nombre de control con - símbolo.
Nota : Se recomienda usar etiquetas de cierre ( </ig-combo> ) sobre las etiquetas de cierre autocipulante ( <ig-combo/> ), porque se sabe que estas últimas tienen problemas en algunos navegadores (dependiendo del modo de documento usado).
| Nombre de control | Etiqueta |
|---|---|
| igombo | <ig-combo> |
| Iggrid | <ig-grid> |
| igdatachart | <ig-data-chart> |
| igdialog | <ig-dialog> |
| IgdateEditor | <ig-date-editor> |
| Igeditor | <ig-editor> |
| Igmaskeditor | <ig-mask-editor> |
| editor ignumericano | <ig-numeric-editor> |
| IgpercentEditor | <ig-percent-editor> |
| Igtexteditor | <ig-text-editor> |
| igdatepicker | <ig-date-picker> |
| Igree | <ig-tree> |
| Igmap | <ig-map> |
| rastreado | <ig-upload> |
| IgvideOplayer | <ig-video-player> |
Hay dos atributos obligatorios que deben establecerse en una etiqueta personalizada de control UI de Ignite: options : apunta a una propiedad en la clase de componentes de la aplicación que contiene la configuración del control. widgetId : el control requiere que se asigne una identificación.
@Component({
selector: 'my-app',
template: `<ig-grid
[(options)]="gridOptions"
[(widgetId)]='id'
[dataSource]='data'
></ig-grid>`
})
export class AppComponent {
private gridOptions: IgGrid;
private id: string;
private data: any;
constructor() {
this.data = Northwind.getData();
this.id ='grid1';
this.gridOptions = {
width: "100%",
height: "400px",
autoGenerateColumns: true
};
}
}
En este ejemplo, options del atributo apunta a la propiedad gridOptions en la clase Compoment de la aplicación y widgetId apunta a la propiedad id .
Todas las opciones de nivel superior pueden establecerse como atributos de una etiqueta personalizada de control UI de Ignite. En este caso, el atributo options no es obligatorio, pero está permitido. Y si se combinan options y los atributos de nivel superior, los atributos de nivel superior anularán options , cuando hay propiedades superpuestas. También cambiar el atributo de nivel superior aplicará el cambio al widget, solo si la opción es configurable.
@Component({
selector: 'my-app',
template: `<ig-grid
[widgetId]='id'
[width]='w'
[autoCommit]='true'
[dataSource]='data'
[height]='h'
[autoGenerateColumns]='true'
>
</ig-grid>`
})
export class AppComponent {
private id: string;
private data: any;
private w: string;
private h: string;
private pKey: string;
constructor() {
this.data = Northwind.getData();
this.id ='grid1';
this.w = '100%';
this.h = '400px';
this.pKey = 'ProductID';
}
}
Hay dos etiquetas personalizadas <column> y <features> que se utilizan en IgGrid/iGtreegrid/iGhierchicalGrid para configurar las columns y las opciones de features en consecuencia.
<ig-grid [widgetId]='id'>
<column [key]="'ProductID'" [headerText]="'Product ID'" [width]="'165px'" [dataType]="'number'"></column>
<column [key]="'ProductName'" [headerText]="'Product Name'" [width]="'250px'" [dataType]="'string'"></column>
<column [key]="'QuantityPerUnit'" [headerText]="'Quantity per unit'" [width]="'250px'" [dataType]="'string'"></column>
<column [key]="'UnitPrice'" [headerText]="'Unit Price'" [width]="'100px'" [dataType]="'number'"></column>
<features>
<paging [pageSize]="currPageSize"></paging>
<filtering></filtering>
<selection></selection>
<group-by></group-by>
</features>
</ig-grid>
Cada una de las características de las cuadrículas también está representada por una etiqueta personalizada.
| Nombre de la función | Etiqueta |
|---|---|
| De columna | <column-moving> |
| Filtración | <filtering> |
| Grupo | <group-by> |
| Ocultación | <hiding> |
| Móvil | <cell-merging> |
| AppendrowsDemand | <append-rows-on-demand> |
| Multicolumnheaders | <multi-column-headers> |
| Paginación | <paging> |
| Sensible | <responsive> |
| Cambio de tamaño | <resizing> |
| Selectores de fila | <row-selectors> |
| Selección | <selection> |
| Clasificación | <sorting> |
| Resumen | <summaries> |
| Columna de columna | <column-fixing> |
| Servicio de herramientas | <tooltips> |
| Actualización | <updating> |
Para cambiar más opciones a la vez (o recrear el componente con otro conjunto de opciones), la nueva configuración se puede aplicar a la propiedad options .
@Component({
selector: 'my-app',
template: `<ig-grid
[(options)]="gridOptions"
[(widgetId)]='id'
[dataSource]="data"
></ig-grid>`
})
export class AppComponent {
private gridOptions: IgGrid;
private id: string;
private data: any;
constructor() {
this.data = Northwind.getData();
this.id ='grid1';
this.gridOptions = {
width: "100%",
height: "400px",
autoGenerateColumns: true
};
}
recreateGrid() {
this.gridOptions = {
dataSource: Northwind.getAnotherData(),
width: "700px",
autoGenerateColumns: true,
features: [
{ name: "Paging" }
]
};
}
}
En este ejemplo, options del atributo apunta a gridOptions y el cambio en referencia destruirá la cuadrícula, combinará las opciones antiguas con otras nuevas y creará la cuadrícula con las opciones combinadas. También tenga en cuenta que la nueva cuadrícula tendrá una altura de 400px, a pesar de que no se define en las nuevas opciones, debido a la combinación con nuevas opciones. Si se requiere deshabilitar una opción, configúrelo en null , undefined , [] o {} .
Los eventos de enlace a los eventos de control se logran asignando atributos donde el nombre del atributo es el nombre del nombre del evento del control rodeado por paréntesis y el valor es el nombre del controlador de eventos.
| Evento | Margen |
|---|---|
| iggrid.events.databind | <ig-grid (dataBind)="dataBindHandler"> |
| igcombo.events.textchanged | <ig-combo (textChanged)="textChangedHandler"> |
| IgdateEditor.events.KeyPress | <ig-date-editor (keypress)="keypressHandler"> |
@Component({
selector: 'my-app',
template: `<ig-grid
[(options)]="gridOptions"
[(widgetId)]='id'
[dataSource]="data"
(dataBind)="dataBindHandler($event)"></ig-grid>`
})
export class AppComponent {
private gridOptions: IgGrid;
private id: string;
private data: any;
private dataBindHandler: any;
constructor() {
this.data = Northwind.getData();
this.id ='grid1';
this.gridOptions = {
width: "100%",
height: "400px",
autoGenerateColumns: true
};
}
dataBindHandler(event, ui) {
// event handler code
}
}
La vinculación a los eventos de características IGGRID* se realiza en el código de configuración del control.
@Component({
selector: 'my-app',
template: `<ig-grid
[(options)]="gridOptions"
[dataSource]="data"
[(widgetId)]='id'></ig-grid>`
})
export class AppComponent {
private gridOptions: IgGrid;
private id: string;
private data: any;
constructor() {
this.data = Northwind.getData();
this.id ='grid1';
this.gridOptions = {
width: "100%",
height: "400px",
autoGenerateColumns: true,
features: [
{
name: "Filtering",
dataFiltered: function (evt, ui) {
// event handler code
}
}
]
};
}
}
En este ejemplo, el evento dataFiltered IGGRIDFiltering se maneja en la clase de componentes de la aplicación.
Se pueden llamar a los métodos de componentes accediendo al componente desde la vista. Por ejemplo:
@Component({
selector: 'my-app',
template: '<ig-grid #grid1
[(options)]="gridOptions">
<features>
<paging [pageSize]="'2'"></paging>
</features>
</ig-grid>'
})
export class AppComponent {
private gridOptions: IgGrid;
@ViewChild("grid1") myGrid: IgGridComponent;
private id: string;
constructor() { ... }
ngAfterViewInit() {
//call grid method
var cell = this.myGrid.cellById(1, "Name");
//call grid paging method
this.myGrid.featuresList.paging.pageIndex(2);
}
}
Los siguientes controles actualmente admiten la unión de datos de dos vías:
Para el enlace de datos de dos vías, debe asignar la fuente de datos como propiedad en la plantilla. Ejemplo:
<ig-combo [widgetId]="'combo2'"
[(options)]="options"
[dataSource]='northwind'
[(ngModel)]="combo.value1">
</ig-combo>
Nota: El enlace de datos de dos vías no funcionará si usa options.dataSource en el archivo .ts como configuración.
Para activar manualmente la detección de cambios, use la API markForCheck .
Gracias a @tipos/Ignite-UI, es posible crear una instancia de todas las fuentes de datos de Ignite UI.
let source = new Infragistics.DataSource(settings);
Esta instancia de fuente de datos se otorga a IntelliSense sobre los métodos de IgdataSource.
source.dataBind();
Revise la siguiente demostración para obtener más información.
El comando para ejecutar las pruebas es:
npm test
Después de eso, si todas las pruebas se aprobaron con éxito una cobertura de código para el archivo public-api.ts se generará en la carpeta ./coverage/igniteui-angular-wrappers .
Para ver la cobertura del código, puede abrir uno de los archivos HTML en ./coverage/igniteui-angular-wrappers/src .
Ignite UI es un conjunto de herramientas HTML5+ avanzado que lo ayuda a crear aplicaciones web modernas y impresionantes. Sobre la base de jQuery y jQuery UI, consiste principalmente en controles/widgets de interfaz de usuario ricos en funciones, como todos los tipos de gráficos, mapas de visualización de datos, cuadrículas de datos (jerárquicas, editables) de datos, cuadrículas PIVOT, editores mejorados (caja combinada, editores enmascarados, editor de HTML, picker de fecha, para nombrar a unos pocos). Demasiados para enumerar aquí: consulte el sitio para obtener más información y descargar una prueba.
Ignite UI no es solo otra biblioteca creada en el tiempo libre de alguien. Está listo para comercializar, extremadamente bien probado, sintonizado para el mejor rendimiento, diseñado para un buen UX y respaldado por infragistics, una compañía centrada en la experiencia con un historial de más de 24 años de experiencia en el proporcionar herramientas de interfaz de usuario de alto rendimiento y de alto rendimiento para entornos web, ventanas y móviles.
