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 a pivotUI.
    // 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 y rowDelete los eventos ahora emiten el argumento de evento de tipo en IRowDataCancelableEventArgs lugar de IGridEditEventArgs. Las dos interfaces siguen siendo compatibles, sin embargo, las propiedades cellID redundantes para estos eventos, newValue, oldValue,están isAddRow en IRowDataCancelableEventArgs 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 Úselo rowKey en su lugar.
        • primaryKey ha quedado obsoleta en las siguientes interfaces: IRowDataEventArgs, IGridEditDoneEventArgs. Úselo rowKey en su lugar.
        • data ha quedado obsoleta en las siguientes interfaces: IRowDataEventArgs. Úselo rowData en su lugar.

    Breaking changes

    • En la versión 17.1.x se ha cambiado el icon tipo de directiva igxButton a la igxIconButton directiva de tipo flat. Las migraciones automáticas están disponibles y se aplicarán en ng update. Sin embargo, algunas de las igxButton propiedades de entrada que antes se podían usar con los icon botones de texto no se pueden aplicar a los recién creados igxIconButton. Si ha utilizado las igxButtonColor propiedades o las igxButtonBackground propiedades con un botón de tipo icon, 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 llamada ng update estándar provocará un error en las migraciones igniteui-angular debido a que package-lock.json se modificó incorrectamente; se pueden encontrar más detalles aquí. Para actualizar a 17.0.x se debe realizar uno de los siguientes pasos adicionales:
      • Elimine el archivo package-lock.json antes de ejecutar ng update
      • Ejecute npm dedupe --legacy-peer-deps antes de ejecutar ng update igniteui-angular

    Cambio radical

    • En los argumentos de evento selectionChanging​ ​IgxCombo, el tipo IComboSelectionChangingEventArgs tiene estos cambios:
      • Se ha cambiado el nombre de las propiedades newSelection y oldSelection a newValue y oldValue respectivamente para reflejar mejor su función. Al igual que value de Combo, emitirán los valores de propiedad especificados o los elementos de datos completos dependiendo de si valueKey está configurado o no. Las migraciones automáticas están disponibles y se aplicarán en ng update.
      • Se exponen dos nuevas propiedades, newSelection y oldSelection, en lugar de las antiguas que ya no se ven afectadas por valueKey y emiten constantemente elementos de data de Combo.
      • Las propiedades added y removed ahora siempre contienen elementos de datos, independientemente de valueKey configurada. Esto los alinea con las propiedades newSelection y oldSelection actualizadas.

    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.

    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ón DisplayDensityToken ahora está en desuso. Esto se extiende a todos los componentes que exponen la propiedad de entrada displayDensity. 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 como IgxGridModule 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, inicialice IgxPaginatorComponent 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) o getCellByColumn(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 las oldSelection, newSelection, added y removed, que forman parte de la interfaz IRowSelectionEventArgs, 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 una primaryKey, 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 en igxFilterCellTemplate)
        • IgxGridCell-CellType (por ejemplo, el parámetro de celda en la plantilla igxCell)

    • 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 a gray.
      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.

      Ejemplo:

      $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 e IgxGridToolbarActionsDirective 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 directivas igxGridToolbarTitle e igxGridToolbarActions 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 propiedad moving de la cuadrícula expuesta en su lugar:
      <igx-grid [moving]="true">
</igx-grid>
    • IgxHierarchicalGrid
      • Cambio importante: el servicio API público para los componentes igxHierarchicalGrid e igxRowIsland, hgridAPI, pasa a llamarse gridAPI.
    • IgxToast
      • Cambio importante: se ha eliminado la propiedad position obsoleta igx-toast. Sugerimos utilizar la propiedad positionSettings de la siguiente manera:
      @ViewChild('toast', { static: true }) public toast: IgxToastComponent;

public ngOnInit(): void {
    this.toast.positionSettings.verticalDirection = VerticalAlignment.Middle;
}

    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.
    • igxGrid, igxHierarchicalGrid, igxTreeGrid

      • Cambio importante: se han eliminado las siguientes entradas obsoletas: showToolbar, toolbarTitle, columnHiding, columnHidingTitle, hiddenColumnsText, columnPinning, columnPinningTitle, pinnedColumnsText. Utilice IgxGridToolbarComponent, 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 entrada allowAdvancedFiltering 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 llamarse rowSelectionChanging para reflejar mejor su función.

      • Cambio importante: el evento columnSelected pasa a llamarse columnSelectionChanging para reflejar mejor su función.

      • Cambio importante: se elimina columnsCollection. Utilice columns en su lugar. Si en ciertas ocasiones columns devuelven una matriz vacía, consulte las columnas usando ViewChildren y acceda a ellas en ngAfterViewInit:

        @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 y rowID se eliminan de RowDirective y de las clases que implementan la interfaz RowType. Utilice data y key en su lugar. Utilice ng 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:
        <ng-template igxCell let-cell="cell">
    <span>{{ cell.rowID }}</span>
    <span>{{ cell.row.rowData.ProductID }}</span>
</ng-template>
        Actualice dichas plantillas manualmente para
        <span>{{ cell.key }}</span>
<span>{{ cell.row.data.ProductID }}</span>
    • igxGrid
      • Se expuso una entrada groupStrategy que funciona de manera similar a sortStrategy, lo que permite personalizar el comportamiento de agrupación de la cuadrícula.
    • 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.
    • IgxCombo
      • Se agregó la entrada groupSortingDirection, que le permite establecer el orden de clasificación de los grupos.
    • IgxGrid, IgxTreeGrid, IgxHierarchicalGrid
      • Se agregaron nuevas directivas para volver a crear plantillas de indicadores de clasificación de encabezados: IgxSortHeaderIconDirective, IgxSortAscendingHeaderIconDirective e IgxSortDescendingHeaderIconDirective.
    • 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 es true.
    • IgxColumnActionsComponent
      • Cambio importante: se ha eliminado la siguiente entrada
        • ​columns de entrada. Utilice la entrada columns igxGrid en su lugar.
    • IgxCarousel
      • Cambios importantes: el tipo de animación de carrusel CarouselAnimationType pasa a llamarse HorizontalAnimationType.
    • IgxGridStateDirective: ahora admite disableHiding accesorios de columna y grupos de columnas

    Tematización

    • La propiedad color del componente de icono ha quedado obsoleta. Utilice la propiedad CSS style.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 o hsla.

    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 funciones Grid Paging como se describe en el tema Paginación.
      • Se presentan IgxPageSizeSelectorComponent e IgxPageNavigationComponent 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
      • 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. Utilice getCellByKey, getCellByColumn en su lugar.

    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 evento IGridCellEventArgs emitidos por los eventos cellClick, selected, contextMenu y doubleClick ahora es una instancia de IgxGridCell
    • La propiedad let-cell en la plantilla de celda ahora es IgxGridCell.
    • getCellByColumnVisibleIndex ahora está en desuso y se eliminará en la próxima versión principal. Utilice getCellByKey, 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.

    1. 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
    1. 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 con ng 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 con ng 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 en core. Para utilizar nuestros estilos de tipografía, debe incluir el mixin explícitamente después core y antes theme:
      // 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 y type-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

    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 e igxBottomNavHeaderIcon.
      • 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>

    • Cambios de API

      • Se eliminaron las propiedades id, itemStyle, panels, viewTabs, contentTabs y tabs. Actualmente, la propiedad items 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 a selected.
        • Se cambió el nombre de la propiedad selectedTab a selectedItem.
      • Se eliminaron los eventos onTabSelected y onTabDeselected. Introdujimos tres nuevos eventos, selectedIndexChanging, selectedIndexChange y selectedItemChange, 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.

    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 e igxTabHeaderIcon.
      • 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 y tabs. Actualmente, la propiedad items 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 a selected.
        • La propiedad selectedTabItem se redujo a selectedItem.
        • 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 entrada tabAlignment que acepta cuatro valores diferentes: inicio (predeterminado), centro, fin y justificación. El antiguo tipo contentFit corresponde al valor de alineación start actual y el antiguo tipo fixed, al valor justify actual.
      • Se eliminaron los eventos tabItemSelected y tabItemDeselected. Introdujimos tres nuevos eventos, selectedIndexChanging, selectedIndexChange y selectedItemChange, 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.

    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 el igxInput 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;
}

    IgxDateTimeDirective, IgxDatePickerComponent, IgxTimePickerComponent, IgxDateRangePickerComponent

    • La propiedad value para IgxDateTimeDirective, IgxDatePickerComponent, IgxTimePickerComponent, IgxDateRangePickerComponent ahora acepta el formato de cadena ISO 8601. Esto significa que el tipo value podría ser Date o string.
    • La propiedad inputFormat de IgxDateTimeDirective, IgxDatePickerComponent, IgxTimePickerComponent, IgxDateRangePickerComponent ahora no acepta y para la parte del año. Deberías actualizarlo a yy.

    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.

    From 10.0.x to 10.1.x

    • IgxGrid, IgxTreeGrid, IgxHierarchicalGrid
      • Dado que hemos eliminado las IgxExcelStyleSortingTemplateDirective, IgxExcelStyleHidingTemplateDirective, IgxExcelStyleMovingTemplateDirective, IgxExcelStylePinningTemplateDirective e IgxExcelStyleSelectingTemplateDirective 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 e IgxExcelStyleFilterOperationsTemplateDirective. 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.
    • 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étodo selectedRows() 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>

    From 9.0.x to 10.0.x

    • Menú desplegable Igx

      • La propiedad de visualización del elemento desplegable se ha cambiado de flex a block. 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 entradas visible 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 estilo visibility en hidden, 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 y dropFinished() también están en desuso, cualquier uso del método dropFinished() debe reemplazarse con transitionToOrigin(). De lo contrario, deberá llamar transitionToOrigin() 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 entrada dropStrategy para que sea la implementación IgxAppendDropStrategy 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 e IgxDropLeaveEventArgs debe reemplazarse con IDragBaseEventArgs.

      • Además, cualquier uso de la interfaz IgxDropEventArgs debe reemplazarse con IDropDroppedEventArgs.

    • Directiva IgxRowDrag

      • IRowDragStartEventArgs e IRowDragEndEventArgs se les cambió el nombre del argumento para que quede más claro con qué se relaciona. El argumento owner cambia de nombre a dragDirective. El argumento owner ahora proporciona una referencia al componente propietario. Si tu código fuera como:
        public dragStart(event) {
    const directive = event.owner;
}
        A partir de la versión 8.2.x se debe actualizar a:
        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 propiedad valueKey de los elementos de datos. Todos los combos que tienen valueKey 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 una valueKey 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.

    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 configurado paginationTemplate, 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 siguiente Package "igniteui-angular" has an incompatible peer dependency to "web-animations-js" (requires "^2.3.1", would install "2.3.2-pr208"), debes actualizar usando ng update igniteui-angular --force. Esto podría suceder si actualiza @angular/core y @angular/cli antes de actualizar igniteui-angular.

    From 7.2.x or 7.3.x to 7.3.4

    • Si utiliza el método filterGlobal de IgxGrid, IgxTreeGrid o IgxHierarchicalGrid, debe saber que el parámetro condition ya no es opcional. Cuando se llama al método filterGlobal 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 ahora combo.value es solo un captador.
    • Si usa IgxTextHighlightDirective, debe saber que la propiedad de entrada de la page está en desuso. rowIndex, columnIndex y las propiedades page de la interfaz IActiveHighlightInfo también están en desuso. En su lugar, se agregan propiedades opcionales row y column.
    • 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 a itemsWidth