Guía de actualización
En la Ignite UI for Angular versionando el primer número siempre coincide con la versión principal de Angular que admite el código y el segundo está dedicado a los lanzamientos de versiones principales. Es posible que se introduzcan cambios importantes entre versiones importantes. Una lista completa de cambios para cada versión de Ignite UI for Angular se puede encontrar en el producto REGISTRO DE CAMBIOS
El paquete Ignite UI for Angular también admite la migración automática de versiones a través de esquemas ng update
. Estos intentarán migrar todos los cambios importantes posibles (selectores renombrados, clases y propiedades @Input/Output); sin embargo, es posible que todavía haya cambios que no se puedan migrar. Generalmente están relacionados con la lógica de la aplicación mecanografiada y se describirán adicionalmente a continuación.
Primero ejecute el comando ng update
que analizará su aplicación y las actualizaciones disponibles para sus paquetes.
ng update
Para actualizar la Ignite UI for Angular ejecute el siguiente comando:
ng update @infragistics/igniteui-angular
Para actualizar el paquete gratuito Ignite UI for Angular ejecute el siguiente comando:
ng update igniteui-angular
Cuando actualiza @infragistics/igniteui-angular
o igniteui-angular
, se recomienda actualizar los paquetes @angular/core
, @angular/cli
y igniteui-cli
a sus versiones correspondientes. Para actualizar el paquete CLI Ignite UI, ejecute el siguiente comando:
ng update igniteui-cli
Para actualizar el paquete Angular Core, ejecute el siguiente comando:
ng update @angular/core
Para actualizar el paquete Angular CLI, utilice el siguiente comando:
ng update @angular/cli
Note
Si el comando ng update
falla debido a discrepancias en las dependencias del paquete, revierta la actualización, elimine la carpeta node_modules
y vuelva a ejecutar la actualización con el indicador--force
.
Additional manual changes
Lamentablemente, no todos los cambios se pueden actualizar automáticamente. Los cambios a continuación se dividen en secciones a medida que ocurren en las versiones, por lo que si se requiere alguna actualización, debe comenzar desde su versión actual y aplicar más actualizaciones de abajo hacia arriba.
Por ejemplo: si está actualizando de la versión 6.2.4 a 7.1.0, debe comenzar desde la sección "Desde 6.x...", aplicar esos cambios y avanzar hacia arriba:
From 17.2.x to 18.0.x
Breaking changes
- En la versión 18.0.x, la propiedad obrada
displayDensity
se elimina en favor de la propiedad--ig-size
CSS personalizada. Para obtener más información, consulte la guía de actualización de 16.0.x a 16.1.x.
General
IgxPivotGrid
Breaking changes
- La propiedad
showPivotConfigurationUI
de la cuadrícula dinámica se cambia y se extiende apivotUI
.
// version 17.2.x
<igx-pivot-grid [data]="data" [pivotConfiguration]="pivotConfig" [showPivotConfigurationUI]="false">
</igx-pivot-grid>
// version 18.0.x
<igx-pivot-grid [data]="data" [pivotConfiguration]="pivotConfig" [pivotUI]="{ showConfiguration: false }">
</igx-pivot-grid>
From 17.0.x to 17.1.x
General
IgxGrid
,IgxTreeGrid
,IgxHierarchicalGrid
- Cambios importantes
rowAdd
yrowDelete
los eventos ahora emiten el argumento de evento de tipo enIRowDataCancelableEventArgs
lugar deIGridEditEventArgs
. Las dos interfaces siguen siendo compatibles, sin embargo, las propiedadescellID
redundantes para estos eventos,newValue
,oldValue
,estánisAddRow
enIRowDataCancelableEventArgs
desuso y se eliminarán en una versión futura. El cambio a las nuevas interfaces correctas debería revelar cualquier uso obsoleto que se pueda eliminar de forma segura.
- Obsolescencias
rowID
ha quedado obsoleta en las siguientes interfaces:IGridEditDoneEventArgs
,IPathSegment
,IRowToggleEventArgs
,,IPinRowEventArgs
,IgxAddRowParent
ÚselorowKey
en su lugar.primaryKey
ha quedado obsoleta en las siguientes interfaces:IRowDataEventArgs
,IGridEditDoneEventArgs
. ÚselorowKey
en su lugar.data
ha quedado obsoleta en las siguientes interfaces:IRowDataEventArgs
. ÚselorowData
en su lugar.
- Cambios importantes
Breaking changes
- En la versión 17.1.x se ha cambiado el
icon
tipo de directivaigxButton
a laigxIconButton
directiva de tipoflat
. Las migraciones automáticas están disponibles y se aplicarán enng update
. Sin embargo, algunas de lasigxButton
propiedades de entrada que antes se podían usar con losicon
botones de texto no se pueden aplicar a los recién creadosigxIconButton
. Si ha utilizado lasigxButtonColor
propiedades o lasigxButtonBackground
propiedades con un botón de tipoicon
, debe actualizarlo de la siguiente manera:
// version 17.0.x
<button igxButton="icon" [igxButtonBackground]="'red'">
<igx-icon fontSet="material">search</igx-icon>
</button>
// version 17.1.x
<button igxIconButton="flat" [style.background]="'red'">
<igx-icon fontSet="material">search</igx-icon>
</button>
NOTA: Los usuarios deben agregar manualmente el IgxIconButtonDirective
a sus importaciones:
import { IgxIconButtonDirective } from 'igniteui-angular';
@Component({
...
imports: [IgxIconButtonDirective]
})
From 16.1.x to 17.0.x
General
- En 17.0 Angular se eliminaron los paquetes
@nguniversal/*
. Si el proyecto utiliza estos paquetes, una llamadang update
estándar provocará un error en las migracionesigniteui-angular
debido a quepackage-lock.json
se modificó incorrectamente; se pueden encontrar más detalles aquí. Para actualizar a17.0.x
se debe realizar uno de los siguientes pasos adicionales:- Elimine el archivo
package-lock.json
antes de ejecutarng update
- Ejecute
npm dedupe --legacy-peer-deps
antes de ejecutarng update igniteui-angular
- Elimine el archivo
Cambio radical
- En los argumentos de evento
selectionChanging
IgxCombo
, el tipoIComboSelectionChangingEventArgs
tiene estos cambios:- Se ha cambiado el nombre de las propiedades
newSelection
yoldSelection
anewValue
yoldValue
respectivamente para reflejar mejor su función. Al igual quevalue
de Combo, emitirán los valores de propiedad especificados o los elementos de datos completos dependiendo de sivalueKey
está configurado o no. Las migraciones automáticas están disponibles y se aplicarán enng update
. - Se exponen dos nuevas propiedades,
newSelection
yoldSelection
, en lugar de las antiguas que ya no se ven afectadas porvalueKey
y emiten constantemente elementos dedata
de Combo. - Las propiedades
added
yremoved
ahora siempre contienen elementos de datos, independientemente devalueKey
configurada. Esto los alinea con las propiedadesnewSelection
yoldSelection
actualizadas.
- Se ha cambiado el nombre de las propiedades
Si su código en el controlador de eventos selectionChanging
dependía de la lectura valueKeys
del argumento del evento, actualícelo de la siguiente manera:
// version 16.1.x
public handleSelectionChanging(e: IComboSelectionChangingEventArgs): void {
this.addedItems = e.added;
this.removedItems = e.removed;
}
// version 17.0.x
public handleSelectionChanging(e: IComboSelectionChangingEventArgs): void {
this.addedItems = e.added.map(i => {
return i[e.owner?.valueKey]
});
this.removedItems = e.removed.map(i => {
return i[e.owner?.valueKey]
});
}
getCurrentResourceStrings
se ha eliminado. Utilice las importaciones de cadenas de componentes específicas en su lugar.- Por ejemplo, las cadenas EN provienen de
igniteui-angular
:import { GridResourceStringsEN } from 'igniteui-angular';
- Por ejemplo, las cadenas DE u otros idiomas provienen de
igniteui-angular-i18n
:import { GridResourceStringsDE } from 'igniteui-angular-i18n';
Se pueden encontrar ejemplos de uso en el documento de localización (i18n) actualizado.
- Por ejemplo, las cadenas EN provienen de
From 16.0.x to 16.1.x
General
Non-breaking changes
- Nos estamos alejando del token de inyección
DisplayDensityToken
como una forma de establecer el tamaño de los componentes en favor de una forma más simple y sólida: usar propiedades personalizadas de CSS. Por ese motivo, el token de inyecciónDisplayDensityToken
ahora está en desuso. Esto se extiende a todos los componentes que exponen la propiedad de entradadisplayDensity
. Las propiedades del token y de la entrada se eliminarán en 17.0.0. Le instamos a hacer lo siguiente:
Elimine todas las declaraciones donde se proporciona DisplayDensityToken
:
// *.component.ts
// remove the provider declaration for `DisplayDensityToken`
providers: [{ provide: DisplayDensityToken, useValue: { displayDensity: DisplayDensity.compact } }],
Elimine todos los enlaces o asignaciones programáticas a la propiedad de entrada displayDensity
:
<!-- Remove `[displayDensity]="'compact'"` -->
<igx-grid [displayDensity]="'compact'">...</igx-grid>
En su lugar, utilice la propiedad CSS personalizada--ig-size
para lograr el mismo resultado que con displayDensity
:
/*
Add --ig-size to a component or global file.
Available values are:
- compact: --ig-size-small
- cosy: --ig-size-medium
- comfortable: --ig-size-large
*/
igx-grid {
--ig-size: var(--ig-size-small);
}
From 15.1.x to 16.0.x
La actualización a Angular 16 viene con cambios en cómo operan
NgModules
bajo el capó. Anteriormente, agregar un módulo que depende internamente de otro haría que las declaraciones de ambos estuvieran disponibles en su aplicación. Este comportamiento no fue intencionado y Angular 16 lo cambia. Si su aplicación dependía de este comportamiento, por ejemplo, solo estaba importando un módulo que contiene muchas dependencias internas comoIgxGridModule
y usando componentes que vienen con ellos, deberá agregar manualmente los módulos para cada componente que su aplicación use por separado.Cambios importantes
En 16.0.x, se eliminan todas las propiedades de la cuadrícula relacionadas con la paginación. El comportamiento de paginación ahora se configura y controla completamente a través de
IgxPaginatorComponent
. Para habilitar la paginación en la cuadrícula, inicialiceIgxPaginatorComponent
en la cuadrícula y establezca las propiedades de entrada relacionadas y adjunte los controladores de eventos al propio paginador:
<igx-grid ...>
<igx-paginator #paginator [totalRecords]="totalRecords" [perPage]="25" (pageChange)="pageChange($event) (perPageChange)="perPageChange($event)">
</igx-paginator>
<igx-grid>
@ViewChild('grid', { static: true }) private grid: IgxGridComponent;
@ViewChild('paginator', { static: true }) private paginator: IgxPaginatorComponent;
// prior version 16.0.x
public onButtonClick(event) {
this.grid.nextPage();
this.grid.previousPage();
this.grid.paginate(0);
}
// from version 16.0.x
public onButtonClick(event) {
this.paginator.nextPage();
this.paginator.previousPage();
this.paginator.paginate(0);
}
- En 16.0.x, se elimina el método de cuadrícula
getCellByColumnVisibleIndex(rowIndex: number, index: number)
. En su lugar, utilice:getCellByKey(rowSelector: any, columnField: string)
ogetCellByColumn(rowIndex: number, columnField: string)
. Ejemplo:
// prior version 16.0.x
const cell = grid.getCellByColumnVisibleIndex(rowIndex, columnIndex);
// after version 16.0.x
const rowKey = grid.getRowByIndex(rowIndex).key;
const columnField = grid.getColumnByVisibleIndex(columnIndex).field;
const cell = grid.getCellByKey(rowKey, columnField);
const cell = grid.getCellByColumn(rowIndex, columnField);
From 15.0.x to 15.1.x
- Cambio radical
- Se cambia el tipo de argumentos
rowSelectionChanging
. Ahora lasoldSelection
,newSelection
,added
yremoved
, que forman parte de la interfazIRowSelectionEventArgs
, ya no constan de las claves de fila de los elementos seleccionados (cuando la cuadrícula ha establecido una clave primaria), pero ahora, en cualquier caso, se emiten los datos de la fila. Cuando la cuadrícula funciona con datos remotos y se establece unaprimaryKey
, para las filas seleccionadas que actualmente no forman parte de la vista de la cuadrícula, se emitirá un objeto de datos de fila parcial.
Si su código en el controlador de eventos rowSelectionChanging
dependía de la lectura de claves primarias del argumento del evento, actualícelo de la siguiente manera:
// prior version 15.1.x
public handleRowSelection(e: IRowSelectionEventArgs): void {
this.selectedRows = e.newSelection;
}
// after version 15.1.x
public handleRowSelection(e: IRowSelectionEventArgs): void {
this.selectedRows = e.newSelection.map(rec => {
return rec[e.owner?.primaryKey]
});
}
Cambio de comportamiento Cuando se elimina la fila seleccionada del componente de cuadrícula, no se emite el evento
rowSelectionChanging
.Cambio Visual
En 15.1 los tamaños de los componentes de entrada han aumentado. Esto es más notorio cuando se utiliza el tema Material. Hacemos esto para que coincida con las especificaciones del material. Si su aplicación se ve afectada negativamente por el cambio, puede usar la entrada displayDensity y configurarla en una configuración más densa, por ejemplo, de cómoda a acogedora o de acogedora a compacta.
Ejemplo
<igx-input-group displayDensity="cosy">
...
</igx-input-group>
<igx-select displayDensity="cosy">
...
</igx-select>
<igx-combo displayDensity="cosy">
</igx-combo>
<igx-simple-combo displayDensity="cosy">
...
</igx-simple-combo>
En 15.1, los componentes de selección y combinación ahora tienen un fondo alrededor del ícono de alternancia. Puedes cambiar el fondo y el color del icono usando scss o css.
Ejemplo
$my-select: select-theme(
$toggle-button-background: red,
$toggle-button-foreground: #fff,
);
$my-combo: combo-theme(
$toggle-button-background: red,
$toggle-button-foreground: #fff,
);
@include css-vars($my-select);
@include css-vars($my-combo);
**Example**
.igx-select {
--igx-select-toggle-button-background: red;
--igx-select-toggle-button-foreground: #fff;
}
.igx-combo {
--igx-combo-toggle-button-background: red;
--igx-combo-toggle-button-foreground: #fff;
}
From 14.2.x to 15.0.x
General
igxGrid
,igxHierarchicalGrid
,igxTreeGrid
- Los parámetros en las plantillas de cuadrícula ahora tienen tipos para su contexto. Esto también puede causar problemas si la aplicación está en modo de plantilla estricta y utiliza el tipo incorrecto. Referencias a la plantilla que pueden requerir conversión:
IgxColumnComponent
-ColumnType
(por ejemplo, el parámetro de columna enigxFilterCellTemplate
)IgxGridCell
-CellType
(por ejemplo, el parámetro de celda en la plantillaigxCell
)
- Los parámetros en las plantillas de cuadrícula ahora tienen tipos para su contexto. Esto también puede causar problemas si la aplicación está en modo de plantilla estricta y utiliza el tipo incorrecto. Referencias a la plantilla que pueden requerir conversión:
Ignite UI for Angular tiene una dependencia de igniteui-theming. Agregue la siguiente configuración de preprocesador en el
angular.json
archivo."build": { "options": { "stylePreprocessorOptions": { "includePaths": ["node_modules"] } } }
Cambio importante: todas las variables CSS globales para la configuración del tema, los colores, las elevaciones y la tipografía han cambiado el prefijo de
--igx
a--ig
. Este cambio no afecta las variables de los componentes globales;Example:
En 14.2.x:
:root { --igx-typography: 'Titillium Web', sans-serif; }
En 15.0.x esto se convierte en:
:root { --ig-typography: 'Titillium Web', sans-serif; }
Themes
Cambio importante: se ha cambiado el nombre del argumento de entrada
grays
agray
.
Así es como esto afectará el código existente:En 14.2.x:
$my-palette: palette( $primary: #09f, $secondary: #e41c77, $grays: #000 ); .my-class { background: color($color: 'grays', $variant: 300); color: contrast-color($color: 'grays', $variant: 300); border-color: hsl(var(--igx-grays-500)); }
En 15.0.x y en adelante:
$my-palette: palette( $primary: #09f, $secondary: #e41c77, $gray: #000 ); .my-class { background: color($color: 'gray', $variant: 300); color: contrast-color($color: 'gray', $variant: 300); border-color: hsl(var(--ig-gray-500)); }
Cambio importante: la generación de variables CSS para una paleta ahora se realiza mediante el mixin de paleta, en lugar del mixin de vars de paleta.
Cambio importante: la función de paleta ahora requiere que se pase un color de superficie, mientras que pasar un valor para el color
gray
es opcional. Si no se proporciona un valor para el color base gris, se generará automáticamente en función de la luminosidad del color de la superficie: el color de la superficie claro da como resultado un color base gris negro (#000), mientras que un color de superficie oscuro genera un color blanco ( #fff) color gris base. Cuando generas una paleta, debes tener en cuenta que ya no hay valores predeterminados para información, éxito, error y colores de advertencia. Debe configurarlos explícitamente si desea utilizarlos. También puedes tomar esos colores de una paleta existente si no quieres crear los valores tú mismo.Example:
$my-palette: palette( $primary: #09f, $secondary: #e41c77, $surface: #fff, $info: color($light-material-palette, 'info'), $success: color($light-material-palette, 'success'), $error: color($light-material-palette, 'error'), $warn: color($light-material-palette, 'warn'), ); @include palette($my-palette);
Cambio importante: el parámetro de paleta ahora se elimina de todos los temas de componentes. Puede utilizar el mixin de paleta para definir el alcance de una paleta personalizada para un tema de componente personalizado. Desde que dejamos de admitir IE11, todos los temas de componentes se refieren a las variables CSS globales para colores, elevaciones, tipografía, etc., por lo que ya no es necesario pasar una paleta personalizada a un tema de componente.
Generando un tema personalizado con una paleta personalizada:
// app.component.scss $my-palette: palette( $primary: royalblue, $secondary: orange, $surface: white ); $avatar: avatar-theme( $background: color($color: 'primary'), $color: contrast-color($color: 'primary') ); :host ::ng-deep { // Include the custom palette in the scope of the app component. // It will have a higher specificity than the global palette. @include palette($my-palette): .my-avatar { @include avatar($avatar); } }
Tipografía
Cambio importante: el mixin de estilo de letra ahora no acepta la escala de tipo como parámetro, solo el nombre de la categoría.
En 14.2.x y anteriores:
.my-class { @include type-style($type-scale: $my-type-scale, $category: h1); }
En 15.0.x y posteriores:
.my-class { @include type-style(h1); }
Elevaciones
Cambio importante: la función de elevación ahora tiene solo un argumento con nombre: $name (el nombre de la elevación).
Cambio importante: se eliminó la función de elevaciones, ahora puede configurar los colores de elevación utilizando el mixin
configure-elevations
.En 14.2.x y anteriores:
.my-class { box-shadow: elevation($elevations, $elevation: 8); }
En 15.0.x y posteriores:
.my-class { box-shadow: elevation(8); }
Grid Toolbar
Cambio importante:
IgxGridToolbarTitleDirective
eIgxGridToolbarActionsDirective
se han convertido en componentes, manteniendo solo el selector de elementos. Para las aplicaciones que utilizan el marcado de elemento preferido de<igx-grid-toolbar-title>
y<igx-grid-toolbar-actions>
no debería haber ningún cambio funcional. Las aplicaciones que utilizan las directivasigxGridToolbarTitle
eigxGridToolbarActions
en otros elementos deberán convertirlos a los elementos mencionados:From:
<igx-grid-toolbar> <span igxGridToolbarTitle>Title</span > <div igxGridToolbarActions> ... </div> </igx-grid-toolbar>
To:
<igx-grid-toolbar> <igx-grid-toolbar-title>Title</igx-grid-toolbar-title> <igx-grid-toolbar-actions> ... </igx-grid-toolbar-actions> </igx-grid-toolbar>
From 13.1.x to 13.2.x
Themes
- Cambio importante: se han eliminado todas las hojas de estilo específicas de RTL. Los temas Ignite UI ahora admiten la dirección RTL de forma predeterminada. Los usuarios que hayan utilizado previamente temas específicos
*-rtl.css
deben cambiar a los archivos de temas normales.
From 13.0.x to 13.1.x
General
igxGrid
,igxHierarchicalGrid
,igxTreeGrid
- Cambio importante: la propiedad
movable
de las columnas ha quedado obsoleta. Utilice la propiedadmoving
de la cuadrícula expuesta en su lugar:
<igx-grid [moving]="true"> </igx-grid>
- Cambio importante: la propiedad
IgxHierarchicalGrid
- Cambio importante: el servicio API público para los componentes igxHierarchicalGrid e igxRowIsland,
hgridAPI
, pasa a llamarsegridAPI
.
- Cambio importante: el servicio API público para los componentes igxHierarchicalGrid e igxRowIsland,
IgxToast
- Cambio importante: se ha eliminado la propiedad
position
obsoletaigx-toast
. Sugerimos utilizar la propiedadpositionSettings
de la siguiente manera:
@ViewChild('toast', { static: true }) public toast: IgxToastComponent; public ngOnInit(): void { this.toast.positionSettings.verticalDirection = VerticalAlignment.Middle; }
- Cambio importante: se ha eliminado la propiedad
From 12.2.x to 13.0.x
General
IE discontinued support
IgxDialog
- Cambio importante: la animación de apertura/cierre de la configuración de posición predeterminada se ha cambiado a
fadeIn
/fadeOut
.
- Cambio importante: la animación de apertura/cierre de la configuración de posición predeterminada se ha cambiado a
igxGrid
,igxHierarchicalGrid
,igxTreeGrid
Cambio importante: se han eliminado las siguientes entradas obsoletas:
showToolbar
,toolbarTitle
,columnHiding
,columnHidingTitle
,hiddenColumnsText
,columnPinning
,columnPinningTitle
,pinnedColumnsText
. UtiliceIgxGridToolbarComponent
,IgxGridToolbarHidingComponent
,IgxGridToolbarPinningComponent
en su lugar.Cambio importante: al agregar el componente
igx-toolbar
, ahora debe especificar manualmente qué funciones desea habilitar: ocultación de columnas, fijación y exportación a Excel. El filtrado avanzado se puede habilitar a través de la propiedad de entradaallowAdvancedFiltering
en la cuadrícula, pero se recomienda habilitarlo de forma declarativa con marcado, al igual que con las otras funciones.Cambio importante: el evento
rowSelected
pasa a llamarserowSelectionChanging
para reflejar mejor su función.Cambio importante: el evento
columnSelected
pasa a llamarsecolumnSelectionChanging
para reflejar mejor su función.Cambio importante: se elimina
columnsCollection
. Utilicecolumns
en su lugar. Si en ciertas ocasionescolumns
devuelven una matriz vacía, consulte las columnas usandoViewChildren
y acceda a ellas enngAfterViewInit
:@ViewChildren(IgxColumnComponent, { read: IgxColumnComponent }) public columns: QueryList<IgxColumnComponent>;
Cambio importante: al aplicar una directiva personalizada en el grid, inyecte el token
IGX_GRID_BASE
en el constructor para obtener referencia al grid de alojamiento:<igx-grid customDirective ...></igx-grid>
@Directive({ selector: '[customDirective]' }) export class customDirective { constructor(@Host() @Optional() @Inject(IGX_GRID_BASE) grid: IgxGridBaseDirective) { }
RowDirective
,RowType
- Cambio importante: las propiedades
rowData
yrowID
se eliminan deRowDirective
y de las clases que implementan la interfazRowType
. Utilicedata
ykey
en su lugar. Utiliceng update
para la migración automática. La migración automática no podrá seleccionar algunos ejemplos de plantillas donde el objeto de contexto de plantilla no esté escrito:
Actualice dichas plantillas manualmente para<ng-template igxCell let-cell="cell"> <span>{{ cell.rowID }}</span> <span>{{ cell.row.rowData.ProductID }}</span> </ng-template>
<span>{{ cell.key }}</span> <span>{{ cell.row.data.ProductID }}</span>
- Cambio importante: las propiedades
igxGrid
- Se expuso una entrada
groupStrategy
que funciona de manera similar asortStrategy
, lo que permite personalizar el comportamiento de agrupación de la cuadrícula.
- Se expuso una entrada
IgxCsvExporterService
,IgxExcelExporterService
- Ya no es necesario proporcionar servicios de exportador en la aplicación, ya que ahora se inyectan en el nivel raíz.
IgxGridToolbarPinningComponent
,IgxGridToolbarHidingComponent
- Nuevo
buttonText
de entrada expuesto. Texto que establece el texto que se muestra dentro del botón desplegable en la barra de herramientas.
- Nuevo
IgxCombo
- Se agregó la entrada
groupSortingDirection
, que le permite establecer el orden de clasificación de los grupos.
- Se agregó la entrada
IgxGrid
,IgxTreeGrid
,IgxHierarchicalGrid
- Se agregaron nuevas directivas para volver a crear plantillas de indicadores de clasificación de encabezados:
IgxSortHeaderIconDirective
,IgxSortAscendingHeaderIconDirective
eIgxSortDescendingHeaderIconDirective
.
- Se agregaron nuevas directivas para volver a crear plantillas de indicadores de clasificación de encabezados:
IgxDialog
- Se agregó la entrada
focusTrap
para establecer si el foco de la tecla Tab queda atrapado dentro del cuadro de diálogo cuando se abre. El valor predeterminado estrue
.
- Se agregó la entrada
IgxColumnActionsComponent
- Cambio importante: se ha eliminado la siguiente entrada
-
columns
de entrada. Utilice la entradacolumns
igxGrid
en su lugar.
-
- Cambio importante: se ha eliminado la siguiente entrada
IgxCarousel
- Cambios importantes: el tipo de animación de carrusel
CarouselAnimationType
pasa a llamarseHorizontalAnimationType
.
- Cambios importantes: el tipo de animación de carrusel
IgxGridStateDirective
: ahora admitedisableHiding
accesorios de columna y grupos de columnas
Tematización
- La propiedad
color
del componente de icono ha quedado obsoleta. Utilice la propiedad CSSstyle.color
para cambiar su color predeterminado. Ejemplos:
<igx-icon [style.color]="'#e41c77'">home</igx-icon>
<igx-icon style.color="{{ col.hasSummary ? '#e41c77' : '' }}">functions</igx-icon>
- Módulos Sass: el motor de temas ha cambiado a módulos Sass. Este cambio significa que todas las funciones de la biblioteca de temas (temas de componentes, etc.), mixins (mixins de componentes, etc.) y variables ahora se
forwarded
desde un solo archivo. Para utilizar correctamente la biblioteca de temas de Sass, su proyecto debe utilizar Dart Sass versión 1.33.0 o posterior y cambiar todas las importaciones de la biblioteca de temas desde:
// free version
@import '~igniteui-angular/lib/core/styles/themes/index';
// licensed version
@import '~@infragistics/igniteui-angular/lib/core/styles/themes/index';
to:
// free version
@use 'igniteui-angular/theming' as *;
// licensed version:
@use '@infragistics/igniteui-angular/theming' as *;
Si desea importar toda la biblioteca de temas solo una vez y luego usarla en otros archivos Sass en su aplicación, asegúrese de reenviarla. Los archivos Sass importados no se reenviarán automáticamente.
Before:
// _variables.scss
// free version
@import '~igniteui-angular/lib/core/styles/themes/index';
// licensed version
@import '~@infragistics/igniteui-angular/lib/core/styles/themes/index';
// _other-file.scss
@import 'variables';
After:
// _variables.scss
// free versioin
@use 'igniteui-angular/theming' as *;
@forward 'igniteui-angular/theming';
// licensed version
@use '@infragistics/igniteui-angular/theming' as *;
@forward '@infragistics/igniteui-angular/theming';
// _other-file.scss
@use 'variables' as *;
- Paletas y esquemas:
- Las variables de la paleta CSS ya no se refieren a valores HEX, sino que representan una lista de 3 valores H, S y L, lo que significa que deben pasarse a las funciones CSS
hsl
ohsla
.
Before:
.some-class {
background: var(--igx-surface-500); // returns HEX color
}
After:
.some-class {
background: hsl(var(--igx-surface-500)); // returns a list of H, S, L
}
Esto se hizo para que las paletas se puedan cambiar en tiempo de ejecución utilizando únicamente variables CSS. De esta manera, el canal alfa para un color de paleta determinado se puede modificar en tiempo de ejecución sin afectar el color de la paleta subyacente.
- Asegúrese de pasar la paleta y el esquema de componentes correctos a sus componentes personalizados y temas globales. Si desea crear un tema oscuro global, asegúrese de seleccionar un tono de color más claro para su color gris, por ejemplo:
$my-dark-palette: palette(
$primary: olive,
$secondary: yellow,
$grays: #fff
);
@include dark-theme($palette: $my-dark-palette);
Del mismo modo, los temas claros requieren un tono de gris más oscuro y un esquema de color claro.
Si no ha excluido ningún tema de componente del tema global pero aún desea crear sus propios temas de reemplazo personalizados usando el mixin css-vars
, asegúrese de que el tema tenga la paleta correcta y el esquema correspondiente:
$my-custom-grid: grid-theme(
$palette: $my-dark-palette,
$schema: $dark-schema
);
@include css-vars($my-custom-grid);
- Temas de componentes excluidos:
En caso de que haya excluido algunos temas de componentes del tema global y haya creado temas de reemplazo personalizados, debe asegurarse de que el mixin de componentes esté incluido y se le pase el tema de componente correcto:
$my-dark-palette: palette(
...
$exclude: ('igx-grid')
);
$my-custom-grid: grid-theme(
$palette: $my-dark-palette,
$schema: $dark-schema
);
// Ensuregrid is included:
@include grid($my-custom-grid);
En caso de que los temas de sus componentes personalizados se declaren en un archivo Sass de componente separado, que no sea el styles.scss
global, asegúrese de que también se incluya el mixin core
.
// free version
@use 'igniteui-angular/theming' as *;
// licensed version
@use '@infragistics/igniteui-angular/theming' as *;
// Include the core module mixin.
@include core();
// Create your theme.
$my-custom-grid: grid-theme(
$palette: $my-dark-palette,
$schema: $dark-schema
);
// Include your custom theme styles.
@include grid($my-custom-grid);
Para comprender mejor el sistema Sass Moule, puede leer este excelente artículo de Miriam Suzanne;
From 12.0.x to 12.1.x
Grids
Cambios importantes:
IgxPaginatorComponent
: la forma en que se crea una instancia del paginador en la cuadrícula ha cambiado. Ahora es un componente separado proyectado en el árbol de la cuadrícula. Por lo tanto, la propiedad[paging]="true"
se elimina de todas las cuadrículas y todas las demás propiedades relacionadas con el paginador en la cuadrícula quedan obsoletas. Se recomienda seguir las instrucciones para habilitar las funcionesGrid Paging
como se describe en el tema Paginación.- Se presentan
IgxPageSizeSelectorComponent
eIgxPageNavigationComponent
para facilitar la implementación de cualquier contenido personalizado:
<igx-paginator #paginator> <igx-paginator-content> <igx-page-size></igx-page-size> [My custom text] <igx-page-nav></igx-page-nav> </igx-paginator-content> </igx-paginator>
- La API para el componente de paginación se cambió durante la refactorización y muchas de las propiedades antiguas ahora están obsoletas. Desafortunadamente, tener una migración adecuada para algunos de estos cambios es complicado por decir lo menos, por lo que cualquier error debe manejarse a nivel de aplicación.
- Las siguientes propiedades están obsoletas en Grid:
- paginación, página por página, totalPages, isFirstPage, isLastPage, pageChange, perPageChange, pagingDone
- Los siguientes métodos también están en desuso:
- siguiente página()
- pagina anterior()
- Se ha eliminado la siguiente propiedad:
- paginationTemplate: para definir una plantilla personalizada, utilice
igx-paginator-content
- paginationTemplate: para definir una plantilla personalizada, utilice
- Detalles de HierarchicalGrid: el siguiente uso de la directiva
*igxPaginator
es necesario cuando se trata de habilitar la paginación en RowIslands:
<igx-hierarchical-grid #hGrid > <igx-column *ngFor="let c of hColumns" [field]="c.field"> </igx-column> <igx-row-island [key]="'childData'" [autoGenerate]="true"> <igx-row-island [key]="'childData'" [autoGenerate]="true"> <igx-paginator *igxPaginator></igx-paginator> </igx-row-island> <igx-paginator *igxPaginator></igx-paginator> </igx-row-island> <igx-row-island [key]="'childData2'" [autoGenerate]="true"> <igx-paginator *igxPaginator></igx-paginator> </igx-row-island> <igx-paginator></igx-paginator> </igx-hierarchical-grid>
- Si bien la migración moverá el contenido de su plantilla dentro del contenido
igx-paginator-content
, es posible que no resuelva todos los enlaces de plantilla. Asegúrese de revisar sus archivos de plantilla después de la migración. Los siguientes enlaces se deben cambiar manualmente ya que estas propiedades se han eliminado (pagerEnabled
,pagerHidden
,dropdownEnabled
,dropdownHidden
):
From:
<igx-paginator #paginator [pagerEnabled]="!isPagerDisabled" [pagerHidden]="isPagerHidden" [dropdownHidden]="isDropdownHidden"> </igx-paginator>
To:
<igx-paginator #paginator *ngIf="!isPagerDisabled"> <igx-paginator-content> <igx-page-size *ngIf="isDropdownHidden"></igx-page-size> <igx-page-nav *ngIf="isPagerHidden"></igx-page-nav> </igx-paginator-content> </igx-paginator>
- IgxGridCellComponent, IgxTreeGridCellComponent, IgxHierarchicalGridCellComponent, IgxGridExpandableCellComponent ya no están expuestos en la API pública. Consulte las secciones siguientes para obtener una guía detallada sobre cómo actualizar al nuevo
IgxGridCell
.
Desuso de la red:
- El patrón DI para proporcionar
IgxGridTransaction
está en desuso. Lo siguiente seguirá funcionando, pero se recomienda refactorizarlo, ya que probablemente se eliminará en una versión futura:
@Component({ template: `<igx-grid [data]="data"> ... </igx-grid>`, providers: [{ provide: IgxGridTransaction, useClass: IgxTransactionService }], ... }) export class MyCustomComponent { ... }
Para lograr el comportamiento anterior, debe utilizar la entrada
batchEditing
recién agregada:@Component({ template: `<igx-grid [data]="data" [batchEditing]="true"> ... </igx-grid>` ... }) export class MyCustomComponent { ... }
getCellByColumnVisibleIndex
ahora está en desuso y se eliminará en la próxima versión principal. UtilicegetCellByKey
,getCellByColumn
en su lugar.
- El patrón DI para proporcionar
IgxGridCell migration
IgxGridCellComponent, IgxTreeGridCellComponent, IgxHierarchicalGridCellComponent, IgxGridExpandableCellComponent ya no están expuestos en la API pública.
Las API públicas, que solían devolver una instancia de uno de los anteriores, ahora devuelven una instancia de
IgxGridCell
:
const cell = grid.getCellByColumn(0, 'ProductID'); // returns IgxGridCell
const cell = grid.getCellByKey('ALFKI', 'ProductID'); // returns IgxGridCell
const cell = grid.getCellByColumnVisibleIndex(0, 0); // returns IgxGridCell
const rowCells = grid.getRowByIndex(0).cells; // returns IgxGridCell[]
const selectedCells = grid.selectedCells; // returns IgxGridCell[]
const cells = grid.getColumnByName('ProductID').cells; // returns IgxGridCell[]
- La propiedad
cell
en los argumentos del eventoIGridCellEventArgs
emitidos por los eventos cellClick, selected, contextMenu y doubleClick ahora es una instancia deIgxGridCell
- La propiedad
let-cell
en la plantilla de celda ahora esIgxGridCell
. getCellByColumnVisibleIndex
ahora está en desuso y se eliminará en la próxima versión principal. UtilicegetCellByKey
,getCellByColumn
en su lugar.
Tenga en cuenta:
- ng update migrará los usos de IgxGridCellComponent, IgxTreeGridCellComponent, IgxHierarchicalGridCellComponent, IgxGridExpandableCellComponent, como importaciones, tipificaciones y conversiones. Si un lugar en su código que usa cualquiera de los anteriores no se migra, simplemente elimine la escritura/conversión o cámbielo con
IgxGridCell
. - getCellByIndex y otros métodos devolverán un valor indefinido, si la fila en ese índice no es una fila de datos, sino IgxGroupByRow, IgxSummaryRow, fila de detalles, etc.
Themes
Debido a quejas relacionadas con advertencias de compilación (consulte el n.° 9793), ahora usamos la función math.div
; Esta funcionalidad es compatible con Dart Sass desde la versión 1.33.0 en adelante.
Solución
Si por alguna razón ve errores de compilación de Sass que dicen que math.div
no es una función conocida, significa que está utilizando una versión desactualizada de Sass en su proyecto.
- Actualice a la última versión de Angular usando
ng update
: Angular 12.1.0+ usa el compilador dart-sass de forma predeterminada.
ng update [options]
Si por alguna razón no utiliza Ignite UI / Angular CLI, deberá reemplazar node-sass
con sass
en su proyecto de Node.
npm uninstall node-sass
npm install sass --save-dev
- Si por alguna razón no puede actualizar a la última versión de Angular usando el método anterior, puede recurrir al antiguo método de división de Sass configurando una bandera global en su archivo Sass:
$__legacy-libsass: true;
From 11.1.x to 12.0.x
Themes
Cambios importantes:
- El tema
IgxAvatar
se ha simplificado. El número de parámetros del tema (avatar-theme
) se ha reducido significativamente y ya no incluye parámetros prefijados (icon-*
,initials-*
,image-*
) y parámetros con sufijos (border-radius-*
). Las actualizaciones realizadas conng update
migrarán los temas de avatar existentes, pero es posible que se requieran algunos ajustes adicionales para tener en cuenta la ausencia de parámetros con prefijos y sufijos.
Deberá modificar los temas de avatar específicos del tipo existente de la siguiente manera:
Por ejemplo, esto:
```scss $avatar-theme: avatar-theme( $initials-background: blue, $initials-color: orange, $icon-background: blue, $icon-color: orange, ); @include avatar($avatar-theme); ```
Necesita transformarse en esto:
```scss $initials-avatar: avatar-theme( $background: blue, $color: orange, ); $icon-avatar: avatar-theme( $background: blue, $color: orange, ); .initials-avatar { @include avatar($initials-avatar); } .icon-avatar { @include avatar($icon-avatar); } ```
- El tema
IgxButton
se ha simplificado. El número de parámetros de tema (button-theme
) se ha reducido significativamente y ya no incluye parámetros prefijados (flat-*
,raised-*
, etc.). Las actualizaciones realizadas conng update
migrarán los temas de botones existentes, pero es posible que se requieran algunos ajustes adicionales para tener en cuenta la ausencia de parámetros prefijados.
Para lograr el mismo resultado que en el fragmento de código a continuación.
```html <button igxButton="raised">Raised button</button> <button igxButton="outlined">Outlined button</button> ``` ```scss $my-button-theme: button-theme( $raised-background: red, $outlined-outline-color: green ); @include css-vars($my-button-theme); ```
Debe crear un tema separado para cada tipo de botón y aplicarlo a un selector de CSS.
html <div class="my-raised-btn"> <button igxButton="raised">Raised button</button> </div> <div class="my-outlined-btn"> <button igxButton="outlined">Outlined button</button> </div>
```scss $my-raised-button: button-theme( $background: red ); $my-outlined-button: button-theme( $border-color: red ); .my-raised-btn { @include css-vars($my-raised-button); } .my-outlined-btn { @include css-vars($my-outlined-button); } ```
Como puede ver, dado que los parámetros
button-theme
ahora tienen los mismos nombres para cada tipo de botón, tenemos que limitar nuestros temas de botones a un selector CSS para tener diferentes colores para diferentes tipos.Aquí puedes ver todas las propiedades disponibles del
button-theme
- El mixin
typography
ya no está incluido implícitamente encore
. Para utilizar nuestros estilos de tipografía, debe incluir el mixin explícitamente despuéscore
y antestheme
:
// in styles.scss @include core(); @include typography( $font-family: $material-typeface, $type-scale: $material-type-scale ); @include theme();
Important
El mixin
core
siempre debe incluirse primero.Para cada tema incluido en Ignite UI for Angular proporcionamos variables específicas
font-family
ytype-scale
que puede usar:Tema Familia tipográfica Tipo Escala Material $tipo-de-material $escala-tipo-material Fluido $ tipo de letra fluido $ escala de tipo fluido Oreja $bootstrap-tipo de letra $bootstrap-tipo-escala Índigo $tipo de letra índigo $escala-tipo-índigo - El tema
IgxBottomNav component
El IgxBottomNavComponent fue completamente refactorizado para proporcionar una forma más flexible y descriptiva de definir encabezados y contenidos de pestañas. Se recomienda actualizar mediante ng update para migrar las definiciones de igx-bottom-nav existentes a las nuevas.
Plantilla
- La nueva estructura define los componentes del elemento de navegación inferior, cada uno de los cuales incluye un encabezado y un componente de contenido. Los encabezados suelen contener un icono (
Material guidelines
), pero también pueden tener una etiqueta o cualquier otro contenido personalizado. - Para fines de estilo de encabezado, introdujimos dos nuevas directivas:
igxBottomNavHeaderLabel
eigxBottomNavHeaderIcon
. - Dado que el componente de encabezado ahora permite agregar cualquier contenido, la directiva
igxTab
, que se usaba anteriormente para volver a crear la plantilla del encabezado de la pestaña, se eliminó porque ya no es necesaria. - Cuando el componente se utiliza en un escenario de navegación, la directiva
routerLink
debe adjuntarse al componente de encabezado.
<igx-bottom-nav> <igx-bottom-nav-item> <igx-bottom-nav-header> <igx-icon igxBottomNavHeaderIcon>folder</igx-icon> <span igxBottomNavHeaderLabel>Tab 1</span> </igx-bottom-nav-header> <igx-bottom-nav-content> Content 1 </igx-bottom-nav-content> </igx-bottom-nav-item> ... </igx-bottom-nav>
- La nueva estructura define los componentes del elemento de navegación inferior, cada uno de los cuales incluye un encabezado y un componente de contenido. Los encabezados suelen contener un icono (
Cambios de API
- Se eliminaron las propiedades
id
,itemStyle
,panels
,viewTabs
,contentTabs
ytabs
. Actualmente, la propiedaditems
devuelve la colección de pestañas. - Se cambiaron las siguientes propiedades:
- Se cambió el nombre de la propiedad
isSelected
del elemento de pestaña aselected
. - Se cambió el nombre de la propiedad
selectedTab
aselectedItem
.
- Se cambió el nombre de la propiedad
- Se eliminaron los eventos
onTabSelected
yonTabDeselected
. Introdujimos tres nuevos eventos,selectedIndexChanging
,selectedIndexChange
yselectedItemChange
, que brindan más flexibilidad y control sobre la selección de pestañas. Desafortunadamente, tener una migración adecuada para estos cambios de eventos es complicado por decir lo menos, por lo que cualquier error debe manejarse a nivel de proyecto.
- Se eliminaron las propiedades
IgxTabs component
El IgxTabsComponent fue completamente refactorizado para proporcionar una forma más flexible y descriptiva de definir encabezados y contenidos de pestañas. Se recomienda actualizar mediante ng update para migrar las definiciones de igx-tabs existentes a las nuevas.
Plantilla
- La nueva estructura define los componentes de los elementos de la pestaña, cada uno de los cuales incluye un encabezado y un componente de contenido. Los encabezados suelen contener un icono y una etiqueta, pero también pueden tener cualquier otro contenido personalizado.
- Para fines de estilo de encabezado, introdujimos dos nuevas directivas:
igxTabHeaderLabel
eigxTabHeaderIcon
. - Dado que el componente de encabezado ahora permite agregar cualquier contenido, la directiva
igxTab
, que se usaba anteriormente para volver a crear la plantilla del encabezado de la pestaña, se eliminó porque ya no es necesaria. - Cuando el componente se utiliza en un escenario de navegación, la directiva
routerLink
debe adjuntarse al componente de encabezado.
<igx-tabs> <igx-tab-item> <igx-tab-header> <igx-icon igxTabHeaderIcon>folder</igx-icon> <span igxTabHeaderLabel>Tab 1</span> </igx-tab-header> <igx-tab-content> <h1>Tab 1 Content</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </igx-tab-content> </igx-tab-item> ... </igx-tabs>
Cambios de API
- Se eliminaron las propiedades
id
,groups
,viewTabs
,contentTabs
ytabs
. Actualmente, la propiedaditems
devuelve la colección de pestañas. - Se cambiaron las siguientes propiedades:
- Se cambió el nombre de la propiedad
isSelected
del elemento de pestaña aselected
. - La propiedad
selectedTabItem
se redujo aselectedItem
. - La propiedad
type
, con sus opciones contentFit y fijas, ya no está disponible. El modo de posicionamiento y tamaño del encabezado actualmente está controlado por la propiedad de entradatabAlignment
que acepta cuatro valores diferentes: inicio (predeterminado), centro, fin y justificación. El antiguo tipocontentFit
corresponde al valor de alineaciónstart
actual y el antiguo tipofixed
, al valorjustify
actual.
- Se cambió el nombre de la propiedad
- Se eliminaron los eventos
tabItemSelected
ytabItemDeselected
. Introdujimos tres nuevos eventos,selectedIndexChanging
,selectedIndexChange
yselectedItemChange
, que brindan más flexibilidad y control sobre la selección de pestañas. Desafortunadamente, tener una migración adecuada para estos cambios de eventos es complicado por decir lo menos, por lo que cualquier error debe manejarse a nivel de proyecto.
- Se eliminaron las propiedades
IgxGridComponent, IgxTreeGridComponent, IgxHierarchicalGridComponent
- IgxGridRowComponent, IgxTreeGridRowComponent, IgxHierarchicalRowComponent, IgxGridGroupByRowComponent ya no están expuestos en la API pública.
- Las API públicas, que solían devolver una instancia de uno de los anteriores, ahora devuelven objetos que implementan la interfaz pública
RowType
:
const row = grid.getRowByIndex(0);
const row = grid.getRowByKey(2);
const row = cell.row;
Si bien la API pública de RowType
es la misma que IgxRowComponent y otros solían exponer, tenga en cuenta:
- El método de alternancia, expuesto por IgxHierarchicalRowComponent, no está disponible. Utilice la propiedad
expanded
para todos los tipos de filas:
grid.getRowByIndex(0).expanded = false;
row.rowData y row.rowID están obsoletos y se eliminarán por completo con la versión 13. Utilice row.data y row.key en su lugar.
- propiedad de fila en los argumentos del evento emitidos por onRowPinning y propiedad dragData en los argumentos del evento emitidos por onRowDragStart, onRowDragEnd ahora está implementando
RowType
- ng update migrará la mayoría de los usos de IgxGridRowComponent, IgxTreeGridRowComponent, IgxHierarchicalRowComponent, IgxGridGroupByRowComponent, como importaciones, tipificaciones y conversiones. Si un lugar en su código que usa cualquiera de los anteriores no se migra, simplemente elimine la escritura/conversión o cámbielo con
RowType
. - getRowByIndex ahora devolverá un objeto
RowType
, si la fila en ese índice es una fila de resumen (anteriormente utilizada para devolver indefinido). row.isSummaryRow y row.isGroupByRow devuelven verdadero si la fila en el índice es una fila de resumen o un grupo por fila.
IgxInputGroupComponent
La propiedad
disabled
ha sido eliminada. La propiedad era engañosa, ya que el estado del grupo de entrada siempre lo administraba eligxInput
subyacente.- La ejecución
ng update
manejará todas las instancias en las que[disabled]
se usó como@Input
en las plantillas. - Si hace referencia a la propiedad en un archivo
.ts
:
export class CustomComponent { public inputGroup: IgxInputGroupComponent ... this.inputGroup.disabled = false; }
debe actualizar manualmente su código para hacer referencia a la propiedad
disabled
de la directiva de entrada subyacente:export class CustomComponent { public input: IgxInputDirective ... this.input.disabled = false; }
- La ejecución
IgxDateTimeDirective, IgxDatePickerComponent, IgxTimePickerComponent, IgxDateRangePickerComponent
- La propiedad
value
para IgxDateTimeDirective, IgxDatePickerComponent, IgxTimePickerComponent, IgxDateRangePickerComponent ahora acepta el formato de cadena ISO 8601. Esto significa que el tipovalue
podría serDate
ostring
. - La propiedad
inputFormat
de IgxDateTimeDirective, IgxDatePickerComponent, IgxTimePickerComponent, IgxDateRangePickerComponent ahora no aceptay
para la parte del año. Deberías actualizarlo ayy
.
From 10.2.x to 11.0.x
- IgxGrid, IgxTreeGrid, IgxHierarchicalGrid
- La forma en que se crea una instancia de la barra de herramientas en la cuadrícula ha cambiado. Ahora es un componente separado proyectado en el árbol de la cuadrícula. Por lo tanto, la propiedad
showToolbar
se elimina de todas las cuadrículas y todas las demás propiedades relacionadas con la barra de herramientas en la cuadrícula quedan obsoletas. Se recomienda seguir la forma recomendada para habilitar las funciones de la barra de herramientas como se describe en el tema Barra de herramientas. - Se elimina la directiva
igxToolbarCustomContent
. Si bien la migración moverá el contenido de su plantilla dentro del contenido de la barra de herramientas, no intenta resolver los enlaces de plantilla. Asegúrese de revisar sus archivos de plantilla después de la migración. - La API para el componente de la barra de herramientas se cambió durante la refactorización y muchas de las propiedades antiguas ahora se eliminaron. Desafortunadamente, tener una migración adecuada para estos cambios es complicado por decir lo menos, por lo que cualquier error debe manejarse a nivel de proyecto.
- La forma en que se crea una instancia de la barra de herramientas en la cuadrícula ha cambiado. Ahora es un componente separado proyectado en el árbol de la cuadrícula. Por lo tanto, la propiedad
From 10.0.x to 10.1.x
- IgxGrid, IgxTreeGrid, IgxHierarchicalGrid
- Dado que hemos eliminado las
IgxExcelStyleSortingTemplateDirective
,IgxExcelStyleHidingTemplateDirective
,IgxExcelStyleMovingTemplateDirective
,IgxExcelStylePinningTemplateDirective
eIgxExcelStyleSelectingTemplateDirective
utilizadas para crear plantillas para algunas partes del menú de filtro de estilo de Excel, puede usar las directivas recién agregadas para crear plantillas para las áreas de operaciones de columna y filtro:IgxExcelStyleColumnOperationsTemplateDirective
ationsTemplateDirective eIgxExcelStyleFilterOperationsTemplateDirective
. También hemos expuesto todos los componentes internos del menú de filtro de estilo de Excel para que puedan usarse dentro de plantillas personalizadas. Puede encontrar más información sobre las nuevas directivas de plantilla en el tema de filtrado estilo Excel.
- Dado que hemos eliminado las
- IgxGrid
- El método
selectedRows()
ha sido refactorizado en una propiedad de entrada denominada. Este cambio importante permite a los usuarios cambiar fácilmente el estado de selección de la cuadrícula en tiempo de ejecución. También se admite la preselección de filas. Todas las instancias en las que se llama al métodoselectedRows()
deben reescribirse sin paréntesis. - El enlace a la propiedad de entrada
selectedRows
podría verse así:
public mySelectedRows = [0, 1, 2];
<igx-grid [data]="myData" rowSelection="multiple" primaryKey="ID" [selectedRows]="mySelectedRows"> <!-- ... --> </igx-grid>
- El método
From 9.0.x to 10.0.x
Menú desplegable Igx
La propiedad de visualización del elemento desplegable se ha cambiado de
flex
ablock
. Hemos hecho esto para tener habilitado el texto truncado de forma predeterminada. Debido a ese cambio, si hay más que texto en el contenido del elemento desplegable, el diseño debe manejarse en el nivel de la aplicación.El siguiente ejemplo demuestra cómo diseñar un elemento desplegable con un icono y contenido de texto para que estén alineados verticalmente.
<igx-drop-down-item> <div class="my-styles"> <igx-icon>alarm</igx-icon> <span>item text</span> </div> </igx-drop-down-item>
.my-styles { display: flex; align-items: center; span { margin-left: 8px; } }
From 8.x.x to 9.0.x
Debido a un cambio importante en Angular 9, los proveedores de Hammer ya no se agregan implícitamente. Consulte el siguiente documento para obtener más detalles: Debido a esto, los siguientes componentes requieren que HammerModule
se importe en el módulo raíz de la aplicación para que las interacciones táctiles funcionen. como se esperaba:
- igxGrid
- igxHierarchicalGrid
- igxTreeGrid
- Lista igx
- igxNavigationDrawer
- igxTimePicker
- igxDatePicker
- igxMonthPicker
- igxControl deslizante *
- igxCalendario
- igxCarrusel
* Nota: igxSlider requiere HammerModule para todas las interacciones del usuario.
Puede utilizar el siguiente fragmento de código para actualizar el archivo del módulo raíz de su aplicación.
import { HammerModule } from "@angular/platform-browser";
@NgModule({
...
imports: [
...
HammerModule
]
})
Debido a los cambios de nombre realizados en algunas de las Enumerations
que exportamos, es necesaria una actualización manual para sus miembros. Aquí hay una lista de todos los cambios realizados que requieren actualización manual:
- Tipo de avatar.
DEFAULT
-> IgxAvatarType.CUSTOM
- Tipo.
DEFAULT
-> IgxBadgeType.PRIMARY
- Tipo de tarjeta Igx.
DEFAULT
-> IgxCardType.ELEVATED
- IgxCardActionsLayout.
DEFAULT
-> IgxCardActionsLayout.START
- IgxDividerType.
DEFAULT
-> IgxDividerType.SOLID
- IgxProgressType.
DANGER
-> IgxProgressType.ERROR
El proceso ng update
actualizará todos los nombres de enumeración, como AvatarType
, Type
, et al. a IgxAvatarType
e IgxBadgeType
, respectivamente. Todos los demás nombres de miembros de la enumeración permanecen sin cambios.
From 8.1.x to 8.2.x
IgxDrag
Dado que
hideBaseOnDrag
y las entradasvisible
están en desuso, para lograr la misma funcionalidad en su aplicación, puede usar cualquier forma de ocultar el elemento base que proporciona Angular. Un ejemplo es establecer el estilovisibility
enhidden
, ya que solo lo hará invisible y mantendrá el espacio que ocupa en el DOM:<div igxDrag [ngStyle]="{ 'visibility': targetDragged ? 'hidden' : 'visible' }" (dragStart)="onDragStarted($event)" (dragEnd)="onDragEnded($event)"> Drag me! </div>
public targetDragged = false; public onDragStarted(event) { this.targetDragged = true; } public onDragEnded(event) { this.targetDragged = false; }
Dado que
animateOnRelease
ydropFinished()
también están en desuso, cualquier uso del métododropFinished()
debe reemplazarse contransitionToOrigin()
. De lo contrario, deberá llamartransitionToOrigin()
dependiendo de cuándo desee que el elemento arrastrado vuelva a su ubicación original. Tenga en cuenta que si se cambia la posición DOM del elemento arrastrado, su ubicación original también cambiará en función de eso.
IgxDrop
Debido a que la estrategia de caída predeterminada proporcionada con la directiva
IxgDrop
ya no se aplica de manera predeterminada, para continuar teniendo el mismo comportamiento, debe configurar la nueva entradadropStrategy
para que sea la implementaciónIgxAppendDropStrategy
proporcionada.<div igxDrop [dropStrategy]="appendStrategy"></div>
import { IgxAppendDropStrategy } from 'igniteui-angular'; // import { IgxAppendDropStrategy } from '@infragistics/igniteui-angular'; for licensed package public appendStrategy = IgxAppendDropStrategy;
Cualquier uso de las interfaces
IgxDropEnterEventArgs
eIgxDropLeaveEventArgs
debe reemplazarse conIDragBaseEventArgs
.Además, cualquier uso de la interfaz
IgxDropEventArgs
debe reemplazarse conIDropDroppedEventArgs
.
Directiva IgxRowDrag
IRowDragStartEventArgs
eIRowDragEndEventArgs
se les cambió el nombre del argumento para que quede más claro con qué se relaciona. El argumentoowner
cambia de nombre adragDirective
. El argumentoowner
ahora proporciona una referencia al componente propietario. Si tu código fuera como:
A partir de la versión 8.2.x se debe actualizar a:public dragStart(event) { const directive = event.owner; }
public dragStart(event) { const directive = event.dragDirective; const grid = event.owner; }
IgxCombo
- Se cambia la forma en que
igx-combo
maneja la selección y el enlace de datos.
- Si la entrada [
valueKey
] del combo está definida, el control buscará esa propiedad específica en la matriz de elementos de datos pasados al realizar la selección. Todos los eventos de selección se manejan con el valor de la propiedadvalueKey
de los elementos de datos. Todos los combos que tienenvalueKey
especificado deben tener su selección/enlace bidireccional consistir únicamente en los valores de la propiedad del objeto especificada en la entrada:
<igx-combo [data]="cities" valueKey="id" displayKey="name"></igx-combo>
export class MyExampleCombo { public data: { name: string, id: string }[] = [{ name: 'London', id: 'UK01' }, { name: 'Sofia', id: 'BG01' }, ...]; ... selectFavorites() { // Selection is handled with the data entries' id properties this.combo.selectItems(['UK01', 'BG01']); } }
- Si el combo no tiene una
valueKey
definida, todos los eventos de selección se manejan con igualdad (===). Todos los combos que no tienen unavalueKey
especificada deben tener su selección/enlace bidireccional manejado con referencias a sus elementos de datos:
<igx-combo [data]="cities" displayKey="name"></igx-combo>
export class MyExampleCombo { public data: { name: string, id: string }[] = [{ name: 'London', id: 'UK01' }, { name: 'Sofia', id: 'BG01' }, ...]; ... selectFavorites() { // Selection is handled with references to the data entries this.combo.selectItems([this.data[0], this.data[1]]); } }
Puede leer más sobre cómo configurar el combo en el archivo Léame y en la documentación oficial.
- Se cambia la forma en que
From 8.0.x to 8.1.x
- El componente
igx-paginator
se presenta como un componente independiente y también se utiliza en los componentes Grid. Tenga en cuenta que si ha configuradopaginationTemplate
, es posible que deba modificar su CSS para mostrar la paginación correctamente. Esto se debe al hecho de que la plantilla ya no se aplica en un contenedor específico de paginación con reglas CSS para centrar el contenido, por lo que es posible que deba agregarlas manualmente. El estilo debería ser algo similar a:
<igx-grid #grid [data]="data" [paging]="true" [perPage]="10" [paginationTemplate]="pager">
</igx-grid>
<ng-template #pager>
<div class="pagination-container"></div>
</ng-template>
.pagination-container {
display: flex;
justify-content: center;
align-items: center;
}
From 7.3.x to 8.0.x
- Durante la actualización, si se enfrenta al siguiente
Package "@angular/compiler-cli" has an incompatible peer dependency to "typescript" (requires ">=3.1.1 <3.3", would install "3.4.5").
, primero debes actualizar el paquete@angular/core
. Esto está relacionado con este problema conocido Angular CLI - Mientras actualiza el paquete
igniteui-angular
, si ve el siguientePackage "igniteui-angular" has an incompatible peer dependency to "web-animations-js" (requires "^2.3.1", would install "2.3.2-pr208")
, debes actualizar usandong update igniteui-angular --force
. Esto podría suceder si actualiza@angular/core
y@angular/cli
antes de actualizarigniteui-angular
.
From 7.2.x or 7.3.x to 7.3.4
- Si utiliza el método
filterGlobal
deIgxGrid
,IgxTreeGrid
oIgxHierarchicalGrid
, debe saber que el parámetrocondition
ya no es opcional. Cuando se llama al métodofilterGlobal
con una condición no válida, no borrará los filtros existentes para todas las columnas.
From 7.1.x to 7.2.x
- Si usa un IgxCombo con
combo.value
, debe saber que ahoracombo.value
es solo un captador. - Si usa
IgxTextHighlightDirective
, debe saber que la propiedad de entrada de lapage
está en desuso.rowIndex
,columnIndex
y las propiedadespage
de la interfazIActiveHighlightInfo
también están en desuso. En su lugar, se agregan propiedades opcionalesrow
ycolumn
. - Si usa el
button-theme
, debe saber que$button-roundness
ha sido reemplazado para cada tipo de botón con:$flat-border-radius
,$raised-border-radius
,$outline-border-radius
,$fab-border-radius
,$icon-border-radius
.
From 7.0.x to 7.1.x
Si utilizas un IgxGrid con resúmenes en tu aplicación, debes saber que ahora se llama al método
IgxSummaryOperand.operate()
con datos vacíos para poder calcular la altura necesaria para la fila de resumen. Para operandos de resumen personalizados, el método siempre debe devolver una matriz de IgxSummaryResult con la longitud adecuada.Antes de la versión 7.1:
export class CustomSummary extends IgxNumberSummaryOperand {
public operate(data?: any[]): IgxSummaryResult[] {
return [{
key: 'average',
label: 'average',
summaryResult: IgxNumberSummaryOperand.average(data).toFixed(2)
}];
}
}
Since version 7.1:
export class CustomSummary extends IgxNumberSummaryOperand {
public operate(data?: any[]): IgxSummaryResult[] {
return [{
key: 'average',
label: 'average',
summaryResult: data.length ? IgxNumberSummaryOperand.average(data).toFixed(2) : null
}];
}
}
From 6.0.x to 6.1.x
- Si usa un control IgxCombo en su aplicación y ha configurado la opción
itemsMaxWidth
, debe cambiar esta opción aitemsWidth