Guía de actualización

    En el Ignite UI for Angular el control de versiones, el primer número siempre coincide con la versión principal de Angular admite el código y el segundo está dedicado a las versiones principales. Es posible que se introduzcan cambios importantes entre las versiones principales. Puede encontrar una lista completa de cambios para cada versión de Ignite UI for Angular en el REGISTRO DE CAMBIOS del producto

    El paquete Ignite UI for Angular también soporta la migración automática de versiones medianteng update esquemas. Estos intentarán migrar todos los posibles cambios de interrupción (selectores, clases y propiedades @Input/Salida renombrados), aunque puede que aún haya cambios que no puedan migrarse. Estos suelen estar relacionados con la lógica de aplicación de typescript y se describirán adicionalmente a continuación.

    Primero ejecuta elng update comando que analizará tu aplicación y las actualizaciones disponibles para sus paquetes.

    ng update

    Para actualizar el paquete con licencia Ignite UI for Angular, ejecute el siguiente comando:

    ng update @infragistics/igniteui-angular

    Para actualizar el paquete gratuito de Ignite UI for Angular, ejecute el siguiente comando:

    ng update igniteui-angular

    Cuando actualizas@infragistics/igniteui-angular oigniteui-angular, se recomienda actualizar@angular/core​@angular/cli yigniteui-cli los paquetes a sus versiones correspondientes. Para actualizar el paquete Ignite UI CLI, ejecuta 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 elng update comando falla debido a las descoincidencias de dependencias de paquetes, entonces revierte la actualización, elimina lanode_modules carpeta y vuelve a ejecutar la actualización con--force la bandera.

    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 20.x to 21.0.x

    Multiple Entry Points Support

    La versión 21.0.0 introduce múltiples puntos de entrada para mejorar el balanceo del árbol y la división de código. El punto de entrada principal (igniteui-angular) sigue siendo totalmente compatible hacia atrás, pero se recomienda migrar a puntos de entrada granulares para obtener tamaños óptimos de fibrado.

    Cambios clave:

    • Componentes organizados en puntos de entrada dedicados (por ejemplo,igniteui-angular/grids/grid​igniteui-angular/button​
    • Algunos componentes reubicados (directivas de entrada, autocompletado, grupo de radio)
    • Renombrar el tipo:Direction →CarouselAnimationDirection

    Migration:

    Al actualizar, se te pedirá que migres las importaciones automáticamente:

    ng update igniteui-angular

    ​Elige "Sí" cuando te lo pidan, o migra más tarde con:

    ng update igniteui-angular --migrate-only --from=20.1.0 --to=21.0.0

    Para detalles completos sobre puntos de entrada, opciones de migración, cambios de interrupciones y ejemplos de uso, consulte la guía de División de Código y Puntos de Entrada Múltiples.

    Dependency Injection Refactor

    Toda inyección interna de dependencias ahora utiliza lainject() API. Esto generalmente no afecta al código de la aplicación, pero si amplías Ignite UI componentes o servicios, puede que necesites actualizar tus constructores para usarinject() en lugar de parámetros constructores.

    From 17.2.x to 18.0.x

    Breaking changes

    • En la versión 18.0.x la propiedad obsoletadisplayDensity se elimina en favor de la propiedad--ig-size CSS personalizada. Para más referencias, consulta la guía de actualización de 16.0.x a 16.1.x.

    General

    • IgxPivotGrid

    Breaking changes

    • La propiedadshowPivotConfigurationUI de la cuadrícula pivotante se modifica 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
        • rowAddyrowDelete los eventos ahora emiten argumento de evento de tipoIRowDataCancelableEventArgs en lugar deIGridEditEventArgs. Las dos interfaces siguen siendo compatibles, aunque redundantes para estos eventos, las propiedadescellID​newValue​oldValue​isAddRow están obsoletas yIRowDataCancelableEventArgs serán eliminadas en una versión futura. Cambiar a las interfaces nuevas correctas debería revelar cualquier uso obsoleto que pueda eliminarse de forma segura.
      • Obsolescencias
        • rowIDLa propiedad ha sido descontinuada en las siguientes interfaces:IGridEditDoneEventArgs,IPathSegment,IRowToggleEventArgs,IPinRowEventArgs,,yIgxAddRowParent será eliminada en una versión futura. ÚsalorowKey en su lugar.
        • primaryKeyha sido obsoleta en las siguientes interfaces:IRowDataEventArgs,IGridEditDoneEventArgs. ÚsalorowKey en su lugar.
        • dataha sido descontinuada en las siguientes interfaces:IRowDataEventArgs. ÚsalorowData en su lugar.

    Breaking changes

    • En la versión 17.1.x elicon tipo de directivaigxButton se ha cambiado por laigxIconButton directiva de tipoflat. Las migraciones automáticas están disponibles y se aplicarán enng update ellas. Sin embargo, algunas de lasigxButton propiedades de entrada que antes podían usarse con losicon botones de tipo no pueden aplicarse a los recién creadosigxIconButton. Si has usado lasigxButtonColor propiedades oigxButtonBackground con un botón de tipoicon, deberías 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 añadir manualmente lasIgxIconButtonDirective fichas en sus importaciones:

    import { IgxIconButtonDirective } from 'igniteui-angular';

@Component({
    ...
    imports: [IgxIconButtonDirective]
})

    From 16.1.x to 17.0.x

    General

    • En la versión 17.0 Angular retirado los@nguniversal/* paquetes. Si el proyecto utiliza estos paquetes, una llamada estándarng update causará un error en lasigniteui-angular migraciones debido a modificacionespackage-lock.json incorrectas; más detalles se pueden encontrar en el número #13668. Para actualizar a17.0.x uno de los siguientes pasos adicionales, es necesario seguir:
      • Elimina elpackage-lock.json archivo antes de ejecutarlong update
      • Corrernpm dedupe --legacy-peer-deps antes que correrng update igniteui-angular

    Cambio radical

    • El tipoIgxCombo de argumentos de evento deselectionChanging InIComboSelectionChangingEventArgs presenta estos cambios:
      • propiedadesnewSelection yoldSelection han sido renombradas respectivamente comonewValue yoldValue para reflejar mejor su función. Al igual que losvalue Combo, estos emitirán los valores de propiedad especificados o los datos completos dependiendo de sivalueKey está configurado o no. Hay migraciones automáticas disponibles que se aplicarán ang update ellas.
      • dos propiedadesnewSelection nuevas yoldSelection quedan expuestas en lugar de las antiguas, que ya no se ven afectadas yvalueKey emiten objetos de forma constante desde lasdata Combo.
      • propiedadesadded yremoved ahora siempre contienen elementos de datos, independientemente de sivalueKey están establecidos. Esto los alinea con las propiedades actualizadasnewSelection yoldSelection de And Properties.

    Si tu código enselectionChanging el gestor de eventos dependía de leervalueKeys del argumento de evento, actualízalo 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]
    });
  }
    • getCurrentResourceStringsha sido eliminado. Utiliza en su lugar las importaciones de cadenas de componentes específicas.

      • Por ejemplo, las cuerdas EN provienen deigniteui-angular:import { GridResourceStringsEN } from 'igniteui-angular';

      • Por ejemplo, las cadenas de DE u otros idiomas provienen deigniteui-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 delDisplayDensityToken token de inyección como una forma de establecer el tamaño de los componentes en favor de una forma más sencilla y robusta: usando propiedades personalizadas CSS. Por esa razón, elDisplayDensityToken token de inyección está ahora obsoleto. Esto se propaga en todos los componentes que exponen la propiedad de entradadisplayDensity. Las propiedades del token y de entrada se eliminarán en la versión 17.0.0. Os instamos a hacer lo siguiente:

    Elimina todas las declaraciones donde se proporcione elDisplayDensityToken siguiente:

    // *.component.ts
// remove the provider declaration for `DisplayDensityToken`
providers: [{ provide: DisplayDensityToken, useValue: { displayDensity: DisplayDensity.compact } }],

    Elimina todas las asignaciones o asignaciones programáticas a ladisplayDensity propiedad de entrada:

    <!-- Remove `[displayDensity]="'compact'"` -->
<igx-grid [displayDensity]="'compact'">...</igx-grid>

    En su lugar, utiliza la propiedad--ig-size CSS personalizada para lograr el mismo resultado que condisplayDensity:

    /* 
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 mejora a Angular 16 viene acompañada de cambios en laNgModules forma de operar bajo el capó. Antes, añadir un módulo que dependía internamente de otro hacía que las declaraciones de ambos estuvieran disponibles en tu app. Este comportamiento no fue intencionado y Angular 16 lo cambia. Si tu app dependía de este comportamiento, por ejemplo, solo importabas un módulo que contenía muchas dependencias internas yIgxGridModule usabas componentes que vienen con esas, tendrás que añadir manualmente los módulos de cada componente que usa tu app por separado.

    • Cambios importantes

    • En la versión 16.0.x, se eliminan todas las propiedades de la cuadrícula relacionadas con el paginaje. El comportamiento de paginación ahora está configurado y controlado completamente a través de elIgxPaginatorComponent. Para habilitar la paginación en la cuadrícula, inicializa enIgxPaginatorComponent la cuadrícula y establece las propiedades de entrada relacionadas, y anexa a los gestores 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 la versión 16.0.x, se elimina el métodogetCellByColumnVisibleIndex(rowIndex: number, index: number) de cuadrilla. En su lugar, usa: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
    • rowSelectionChangingEl tipo de argumentos cambia. Ahora lasoldSelection coleccionesnewSelection​added​removed y que forman parte de laIRowSelectionEventArgs interfaz ya no consisten en las llaves de fila de los elementos seleccionados (cuando la cuadrícula ha establecido una clave primaria), sino que en cualquier caso se emiten los datos de fila. Cuando la cuadrícula trabaja con datos remotos y se establece aprimaryKey, para las filas seleccionadas que no forman parte actualmente de la vista de cuadrícula, se emitirá un objeto de datos parcial de fila.

    Si tu código enrowSelectionChanging el gestor de eventos dependía de leer primaryKeys del argumento de evento, actualízalo 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 la cuadrícula,rowSelectionChanging no se emite el evento.

    • 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);

      Ejemplo

      .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 columna en)igxFilterCellTemplate​
        • IgxGridCell-CellType(por ejemplo, el parámetro de la célula enigxCell la plantilla)

    • Ignite UI for Angular depende del tema igniteui. Añade la siguiente configuración de preprocesador en tuangular.json archivo.

    "build": { "options": { "stylePreprocessorOptions": { "includePaths": ["node_modules"] } } } '''

    • Cambio de interrupción: Todas las variables globales CSS para configuración de temas, colores, elevaciones y tipografía han cambiado el prefijo de--igx a.--ig Este cambio no afecta a las variables globales de los componentes;

      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

    • Breaking Change: Elgrays argumento de entrada ha sido renombrado agray.
      Así es como afectará eso al 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 interrumpido: la función de paleta​ ​ahora requiere que se pase un color de superficie, mientras que pasar un valor para esegray color es opcional. Si no se proporciona un valor para el color base gris, se generará automáticamente en función de la claridad del color de la superficie: el color superficial claro da lugar a un color base gris negro(#000), mientras que un color oscuro genera un gris base blanco(#fff). Cuando generas una paleta, tienes que tener en cuenta que ya no hay valores predeterminados para info, éxito, error y colores de advertencia. Tienes que configurarlos explícitamente si quieres usarlos. También puedes coger 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 de interrupción: la función de elevaciones ha sido eliminada, ahora puedes configurar los colores de elevación usando elconfigure-elevations mixin.

      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 de ruptura: losIgxGridToolbarTitleDirective yIgxGridToolbarActionsDirective se han convertido en componentes, manteniendo solo el selector de elementos. Para aplicaciones que usan 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 usen lasigxGridToolbarTitle directivas yigxGridToolbarActions en otros elementos tendrán que convertirlas en los elementos mencionados en su lugar:

      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 de última hora: todas las hojas de estilo específicas de RTL han sido eliminadas. Ignite UI temas ahora soportan la dirección RTL por defecto. Los usuarios que hayan utilizado*-rtl.css previamente temas específicos deben cambiar a los archivos de temas normales.

    From 13.0.x to 13.1.x

    General

    • igxGrid, igxHierarchicalGrid, igxTreeGrid

      • Cambio de última hora: La propiedad de lasmovable columnas ha sido obsoleta. Utiliza la propiedad de la cuadrículamoving expuesta:

        <igx-grid [moving]="true">
</igx-grid>

    • IgxHierarchicalGrid

      • Breaking Change: El servicio público de API para los componenteshgridAPI igxHierarchicalGrid e igxRowIsland se renombra agridAPI.

    • IgxToast

      • Cambio de Última Hora - Laigx-toast propiedad obsoletaposition ha sido eliminada. Sugerimos usarpositionSettings la propiedad 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 repentino: la animación predeterminada de apertura/cierre de la posición ha sido cambiada a/fadeIn​fadeOut.

    • igxGrid, igxHierarchicalGrid, igxTreeGrid

      • Cambio de ruptura: Las siguientes entradas obsoletas han sido eliminadas -showToolbar,toolbarTitle​columnHiding,columnHidingTitle,,hiddenColumnsText,,columnPinning,columnPinningTitle.pinnedColumnsText ÚsateIgxGridToolbarComponent,IgxGridToolbarHidingComponent​IgxGridToolbarPinningComponent en su lugar.

      • Cambio interrumpido: al añadir unigx-toolbar componente, ahora deberías especificar manualmente qué funciones quieres activar: ocultar columnas, fijar, exportar en Excel. El Filtrado Avanzado puede activarse mediante laallowAdvancedFiltering propiedad de entrada en la cuadrícula, pero se recomienda activarlo declarativamente con marcado, como con las demás funciones.

      • Breaking Change: ElrowSelected evento se renombra pararowSelectionChanging reflejar mejor su función.

      • Breaking Change: ElcolumnSelected evento se renombra paracolumnSelectionChanging reflejar mejor su función.

      • Breaking Change:columnsCollection se elimina. Úsalocolumns en su lugar. Si en determinadas ocasiones devuelvecolumns un array vacío, consulta las columnas usandoViewChildren y accede a las que en:ngAfterViewInit​

        @ViewChildren(IgxColumnComponent, { read: IgxColumnComponent })
public columns: QueryList<IgxColumnComponent>;

      • Cambio de ruptura: al aplicar una directiva personalizada en la cuadrícula, inyecta elIGX_GRID_BASE token en el constructor para obtener referencia a la cuadrícula anfitriona:

        <igx-grid customDirective ...></igx-grid>

        @Directive({
    selector: '[customDirective]'
})
export class customDirective {

constructor(@Host() @Optional() @Inject(IGX_GRID_BASE) grid: IgxGridBaseDirective) { }

    • RowDirective, RowType

      • Las propiedades de Breaking Change​rowData yrowID se eliminan deRowDirective y de las clases que implementan laRowType interfaz. Úsaladata ykey en su lugar. Úsalong update para migración automática. La migración automática no podrá captar algunos ejemplos de plantillas, donde el objeto de contexto plantilla no está tipado:

        <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

      • Expuso unagroupStrategy entrada que funciona desortStrategy forma similar, permitiendo la personalización del 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

      • Entrada nuevabuttonText expuesta que establece el texto que se muestra dentro del botón desplegable en la barra de herramientas.

    • IgxCombo

      • Entrada añadidagroupSortingDirection, que permite establecer el orden de ordenación de los grupos.

    • IgxGrid, IgxTreeGrid, IgxHierarchicalGrid

      • Se añadieron nuevas directivas para reconfigurar indicadores de ordenación de cabeceras -IgxSortHeaderIconDirective,IgxSortAscendingHeaderIconDirective yIgxSortDescendingHeaderIconDirective.

    • IgxDialog

      • Se añadiófocusTrap una entrada para determinar si el enfoque de la tecla Tab queda atrapado dentro del diálogo al abrirlo. Por defectotrue.

    • IgxColumnActionsComponent

      • Cambio importante: se ha eliminado la siguiente entrada
        • Entradacolumns. UsaigxGrid columns input en su lugar.

    • IgxCarousel

      • Cambios de Última Hora: El tipoCarouselAnimationType de animación del carrusel se renombra aHorizontalAnimationType.

    • IgxGridStateDirective- ahora soportadisableHiding column, prop y grupos columnas

    Tematización

    • La propiedad de componentecolor Icon ha sido descontinuada. Usastyle.color la propiedad CSS 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 tematización ha cambiado a módulos Sass. Este cambio significa que todas las funciones de la biblioteca de temas (temas componentes, etc.), mezclas (mixinas componentes, etc.) y variables ahora provienenforwarded de un solo archivo. Para usar correctamente la biblioteca de temáticas de Sasso, tu proyecto debe utilizar Dart Sass versión 1.33.0 o posterior y cambiar todas las importaciones de la biblioteca de temática 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 ahsl las funciones CSS ohsla o.

    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 has excluido ningún tema componente del tema global pero aún quieres crear tus propios temas de reemplazo personalizados usando elcss-vars mixin, asegúrate 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 tus componentes personalizados se declaren en un archivo Sass de componentes separado, distinto al globalstyles.scss, asegúrate de que elcore mixin también esté incluido.

    // 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 entender mejor el Sistema de Módulos Sass, puedes leer este excelente artículo de Miriam Suzanne;

    From 12.0.x to 12.1.x

    Grids

    • Cambios importantes:

      • IgxPaginatorComponent- La forma en que el Paginador se instancia en la cuadrícula ha cambiado. Ahora es un componente separado proyectado en el árbol de la cuadrícula. Así, la[paging]="true" propiedad 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 directrices para habilitarGrid Paging funcionalidades descritas en el tema de Paginación.

      • IgxPageSizeSelectorComponentyIgxPageNavigationComponent se introducen 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, utiliza laigx-paginator-content

      • Detalles de HierarchicalGrid - El siguiente uso de*igxPaginator Directiva es necesario para habilitar el paginado 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>

      • Aunque la migración moverá el contenido de tu plantilla dentro deligx-paginator-content contenido, puede que no resuelva todas las encuentas de plantillas. Asegúrate de revisar tus archivos de plantilla después de la migración. Las siguientes encuadernaciones deben cambiarse manualmente a medida que estas propiedades han sido eliminadas (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 e IgxGridExpandableCellComponent ya no están expuestos en la API pública. Consulta las secciones siguientes para una guía detallada sobre cómo actualizar al nuevoIgxGridCell.

    • Desuso de la red:

      • El patrón DI para proporcionarIgxGridTransaction está obsoleto. 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, deberías usar la entrada recién añadidabatchEditing:

        @Component({
    template: `<igx-grid [data]="data" [batchEditing]="true">
    ...
    </igx-grid>`
    ...
})
export class MyCustomComponent {
    ...
}

      • getCellByColumnVisibleIndexahora está obsoleto y será eliminado en la próxima versión mayor. ÚsategetCellByKey,getCellByColumn en su lugar.

    IgxGridCell migration

    • IgxGridCellComponent, IgxTreeGridCellComponent, IgxHierarchicalGridCellComponent, IgxGridExpandableCellComponent ya no están expuestos en la API pública.

    • Las APIs públicas, que antes devolvían una instancia de una de las anteriores, ahora devuelven una instancia deIgxGridCell:

    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[]
    • cellpropiedad en losIGridCellEventArgs argumentos de evento emitidos por los eventos cellClick, selected, contextMenu y doubleClick es ahora una instancia deIgxGridCell
    • let-cellPropiedad en la plantilla yaIgxGridCell lo es.
    • getCellByColumnVisibleIndexahora está obsoleto y será eliminado en la próxima versión mayor. ÚsategetCellByKey,getCellByColumn en su lugar.

    Tenga en cuenta:

    • ng update migrará los usos de IgxGridCellComponent, IgxTreeGridCellComponent, IgxHierarchicalGridCellComponent, IgxGridExpandableCellComponent, como importaciones, tipados y casts. Si un lugar en tu código que use cualquiera de los anteriores no está migrado, simplemente elimina el tipado/cast, o cámbialo conIgxGridCell ello.
    • 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 (véase #9793) ahora usamos lamath.div función; Esta funcionalidad es compatible con Dart Sass desde la versión 1.33.0 en adelante.

    Solución

    Si por cualquier motivo ves errores de compilación de Sass diciendomath.div que no es una función conocida, significa que estás usando una versión desactualizada de Sass en tu proyecto.

    1. Actualización a la última versión de Angular usandong update Angular 12.1.0+ usa el compilador dart-sass por defecto.

      ng update [options]

      Si por alguna razón no usas la CLI Ignite UI / Angular, tendrías que reemplazarlanode-sass​sass en tu proyecto Node.

      npm uninstall node-sass
npm install sass --save-dev

    2. Si por alguna razón no puedes actualizar a la última versión de Angular usando el método anterior, puedes volver al antiguo método de división de Sass configurando un indicador global en tu archivo Sass:

      $__legacy-libsass: true;

    From 11.1.x to 12.0.x

    Themes

    • Cambios importantes:

      • IgxAvatarEl tema se ha simplificado. El número de parámetros de tema (avatar-theme) se ha reducido significativamente y ya no incluye parámetros prefijos(icon-*,initials-*,image-*) ni parámetros con sufijo(border-radius-*). Las actualizaciones realizadas conng update migrarán los temas de avatar existentes, pero puede ser necesario hacer algunos ajustes adicionales para compensar la ausencia de parámetros prefijados y sufijos.

        Deberá modificar los temas de avatar específicos del tipo existente de la siguiente manera:

        Por ejemplo, esto:

        $avatar-theme: avatar-theme(
    $initials-background: blue,
    $initials-color: orange,
    $icon-background: blue,
    $icon-color: orange,
);

@include avatar($avatar-theme);

        Necesita transformarse en esto:

        $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);
}

      • IgxButtonEl tema se ha simplificado. El número de parámetros de tema (button-theme) se ha reducido significativamente y ya no incluye parámetros prefijos (flat-*,raised-*, etc.). Las actualizaciones realizadas migraránng update los temas de botones existentes, pero puede ser necesario hacer 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.

        <button igxButton="raised">Raised button</button>
<button igxButton="outlined">Outlined button</button>

        $my-button-theme: button-theme(
    $raised-background: red,
    $outlined-outline-color: green
);

@include css-vars($my-button-theme);

        Tienes que crear un tema separado para cada tipo de botón y asignarlo a un selector CSS.

        <div class="my-raised-btn">
<button igxButton="raised">Raised button</button>
</div>
<div class="my-outlined-btn">
    <button igxButton="outlined">Outlined button</button>
</div>

        $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 puedes ver, dado que losbutton-theme parámetros ahora tienen los mismos nombres para cada tipo de botón, tenemos que asignar nuestros temas de botón a un selector CSS para tener diferentes colores para distintos tipos.

        Aquí puedes ver todas las propiedades disponibles de labutton-theme

      • Latypography mezcla ya no se incluye implícitamentecore. Para usar nuestros estilos tipográficos tienes que incluir la mezcla 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

        Lacore mezcla siempre debe incluirse primero.

        Para cada tema incluido en Ignite UI for Angular proporcionamos variables específicasfont-family​type-scale y variables que puedes utilizar:

        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 inferiores de los ítems de navegación, cada uno envolviendo una cabecera y un componente de contenido. Los encabezados suelen contener un icono (Material guidelines), pero bien podrían tener una etiqueta o cualquier otro contenido personalizado.

      • Para fines de diseño del encabezado, introdujimos dos nuevas directrices -igxBottomNavHeaderLabelyigxBottomNavHeaderIcon.

      • Como el componente de cabecera ahora permite añadir cualquier contenido, laigxTab directiva, que antes se usaba para replantar la cabecera de la pestaña, fue eliminada porque ya no es necesaria.

      • Cuando el componente se utiliza en un escenario de navegación, larouterLink directiva debe estar vinculada al componente del 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 retiraron lasid​itemStyle​panels​viewTabs​contentTabs propiedadestabs y las propiedades. Actualmente, laitems propiedad devuelve la colección de tabulaciones.
      • Se cambiaron las siguientes propiedades:
        • La propiedad delisSelected ítem de la pestaña fue renombrada aselected.
        • LaselectedTab propiedad fue renombrada comoselectedItem​
      • LosonTabSelected eventos yonTabDeselected fueron eliminados. Introdujimos tres nuevos eventosselectedIndexChanging​selectedIndexChange​selectedItemChange que ofrecen más flexibilidad y control sobre la selección de las pestañas. Desafortunadamente, disponer de una migración adecuada para estos cambios de eventos es, como poco, complicado, por lo que cualquier error debe gestionarse 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 diseño del encabezado, introdujimos dos nuevas directrices -igxTabHeaderLabelyigxTabHeaderIcon.

      • Como el componente de cabecera ahora permite añadir cualquier contenido, laigxTab directiva, que antes se usaba para replantar la cabecera de la pestaña, fue eliminada porque ya no es necesaria.

      • Cuando el componente se utiliza en un escenario de navegación, larouterLink directiva debe estar vinculada al componente del 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

      • ​id​groups​viewTabs​contentTabsLas propiedadestabs fueron retiradas. Actualmente, laitems propiedad devuelve la colección de tabulaciones.
      • Se cambiaron las siguientes propiedades:
        • La propiedad delisSelected ítem de la pestaña fue renombrada aselected.
        • LaselectedTabItem propiedad se acortó a.selectedItem​
        • Latype propiedad, con sus opciones contentFit y fijas, ya no está disponible. El modo de dimensionamiento y posicionamiento del encabezado está actualmente controlado por latabAlignment propiedad de entrada, que acepta cuatro valores diferentes: start (por defecto), center, end y justify. El tipo antiguocontentFit corresponde al valor de alineación actualstart y el tipo antiguofixed al valor actualjustify.
      • LostabItemSelected eventos ytabItemDeselected fueron eliminados. Introdujimos tres nuevos eventosselectedIndexChanging​selectedIndexChange​selectedItemChange que ofrecen más flexibilidad y control sobre la selección de las pestañas. Desafortunadamente, disponer de una migración adecuada para estos cambios de eventos es, como poco, complicado, por lo que cualquier error debe gestionarse a nivel de proyecto.

    IgxGridComponent, IgxTreeGridComponent, IgxHierarchicalGridComponent

    • IgxGridRowComponent, IgxTreeGridRowComponent, IgxHierarchicalRowComponent, IgxGridGroupByRowComponent ya no están expuestos en la API pública.
    • Las APIs públicas, que antes devolvían una instancia de una de las anteriores, ahora devuelven objetos que implementan la interfaz públicaRowType:
    const row = grid.getRowByIndex(0);
const row = grid.getRowByKey(2);
const row = cell.row;

    Aunque la API pública deRowType es la misma que la que IgxRowComponent y otros usaban para exponer, por favor, tenga en cuenta:

    • toggle, expuesto por el IgxHierarchicalRowComponent, no está disponible. Usarexpanded la propiedad para todos los tipos de filas:
    grid.getRowByIndex(0).expanded = false;

    *row.rowData_ y row.rowID están obsoletos y serán eliminados por completo a partir de la versión 13. Por favor, utiliza row.data y row.key en su lugar.

    • la propiedad row en los argumentos de evento emitidos por onRowPinning, y la propiedad dragData en los argumentos de evento emitidos por onRowDragStart,onRowDragEnd está implementando ahora​​RowType
    • ng update migrará la mayoría de los usos de IgxGridRowComponent, IgxTreeGridRowComponent, IgxHierarchicalRowComponent, IgxGridGroupByRowComponent, como importaciones, tipados y casts. Si un lugar en tu código que use cualquiera de los anteriores no está migrado, simplemente elimina el tipado/cast, o cámbialo conRowType ello.
    • getRowByIndex ahora devolverá unRowType objeto si la fila en ese índice es una fila resumen (anteriormente usada para devolver indefinida). row.isSummaryRow y row.isGroupByRow devolven true si la fila en el índice es una fila resumen o un grupo por fila.

    IgxInputGroupComponent

    • Ladisabled propiedad ha sido retirada. La propiedad era engañosa, ya que el estado del grupo de entrada siempre estaba gestionado por el subyacenteigxInput.

      • Ejecutarng update gestionará todas las instancias en las que[disabled] se usaron como@Input plantillas in.

      • Si estás haciendo referencia a la propiedad en un.ts archivo:

        export class CustomComponent {
    public inputGroup: IgxInputGroupComponent
    ...
    this.inputGroup.disabled = false;
}

        Por favor, debes actualizar manualmente tu código para referenciar la propiedad dedisabled la directiva de entrada subyacente:

        export class CustomComponent {
    public input: IgxInputDirective
    ...
    this.input.disabled = false;
}

    IgxDateTimeDirective, IgxDatePickerComponent, IgxTimePickerComponent, IgxDateRangePickerComponent

    • Lavalue propiedad para IgxDateTimeDirective, IgxDatePickerComponent, IgxTimePickerComponent, IgxDateRangePickerComponent ahora acepta el formato de cadena ISO 8601. Esto significa que esevalue tipo podría serDate o.string​
    • LainputFormat propiedad de IgxDateTimeDirective, IgxDatePickerComponent, IgxTimePickerComponent, IgxDateRangePickerComponent ahora no aceptay para la parte del año. Deberías actualizarlo tambiényy.

    From 10.2.x to 11.0.x

    • IgxGrid, IgxTreeGrid, IgxHierarchicalGrid
      • La forma en que se instancia la barra de herramientas en la cuadrícula ha cambiado. Ahora es un componente separado proyectado en el árbol de la cuadrícula. Así, lashowToolbar propiedad 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 activar las funciones de la barra de herramientas, tal como se describe en el tema de la barra de herramientas.
      • LaigxToolbarCustomContent directiva es eliminada. Aunque la migración mueve el contenido de tu plantilla dentro del contenido de la barra de herramientas, no intenta resolver los enlaces de plantillas. Asegúrate de revisar tus 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
      • Como hemos eliminado lasIgxExcelStyleSortingTemplateDirective directivas de la columnaIgxExcelStyleHidingTemplateDirective​IgxExcelStyleMovingTemplateDirective​IgxExcelStylePinningTemplateDirective​IgxExcelStyleSelectingTemplateDirective y las que se usan para plantar algunas partes del menú de filtro estilo Excel, podrías usar las directivas recién añadidas para plantar las áreas de operaciones de columna y filtro -IgxExcelStyleColumnOperationsTemplateDirectiveand.IgxExcelStyleFilterOperationsTemplateDirective También hemos expuesto todos los componentes internos del menú de filtro estilo Excel para que puedan usarse dentro de plantillas personalizadas. Puedes encontrar más información sobre las nuevas directivas de plantilla en el Tema de Filtrado al estilo Excel.
    • IgxGrid

      • ElselectedRows() método ha sido refactorizado en una propiedad de entrada llamada . Este cambio repentino permite a los usuarios modificar fácilmente el estado de selección de la cuadrícula en tiempo de ejecución. También se permite la preselección de filas. Todas las instancias en las que se llama alselectedRows() método deben reescribirse sin paréntesis.

      • Vincular a laselectedRows propiedad de entrada podría ser algo 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 ha cambiado deflex a.block Hemos hecho esto para tener el texto truncado activado por defecto. Debido a ese cambio, si hay más que texto en el contenido del desplegable, el diseño debe gestionarse a nivel de 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 interrumpido en Angular 9 proveedores de Hammer ya no se añaden implícitamente, por favor, consulte el siguiente documento para más detalles: Por ello, los siguientes componentes debenHammerModule importarse 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 algunos de losEnumerations que exportamos, es necesario actualizar manualmente para sus miembros. Aquí tienes una lista de todos los cambios realizados que requieren actualización manual:

    • Tipo de Avatar.DEFAULT-> IgxAvatarType.CUSTOM
    • Escribe.DEFAULT-> Tipo de IgxBadge.PRIMARY
    • IgxCardType.DEFAULT-> IgxCardType.ELEVATED
    • IgxCardActionsLayout.DEFAULT-> IgxCardActionsLayout.START
    • IgxDividerType.DEFAULT-> IgxDividerType.SOLID
    • IgxTypeProgress.DANGER-> IgxTypeProgress.ERROR

    Elng update proceso actualizará todos los nombres de enumeración, comoAvatarType,Type, et al. aIgxAvatarType yIgxBadgeType, respectivamente. Todos los demás nombres de los miembros de la enumeración permanecen sin cambios.

    From 8.1.x to 8.2.x

    • IgxDrag

      • ComohideBaseOnDrag las entradas de yvisible están siendo desutilizadas, para lograr la misma funcionalidad en tu aplicación, puedes usar cualquier forma de ocultar el elemento base que Angular proporcione. Un ejemplo es establecer elvisibility estilo parahidden, 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;
}

      • ComoanimateOnRelease ydropFinished() también están siendo desutilizados, cualquierdropFinished() uso de método debería ser reemplazado portransitionToOrigin(). De lo contrario, tendrías que llamartransitionToOrigin() dependiendo de cuándo quieras que el elemento arrastrado vuelva a su ubicación original. Ten en cuenta que si la posición del DOM del elemento arrastrado cambia, su ubicación original también cambiará en función de eso.

    • IgxDrop

      • Debido a que la estrategia de drop por defecto proporcionada con laIxgDrop directiva ya no se aplica por defecto, para que sigas teniendo el mismo comportamiento, necesitas configurar la nueva entradadropStrategy como la implementación proporcionadaIgxAppendDropStrategy.

        <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 interfacesIgxDropEnterEventArgs deberíaIgxDropLeaveEventArgs ser reemplazado porIDragBaseEventArgs.

      • Además, cualquier uso de laIgxDropEventArgs interfaz debería ser reemplazado porIDropDroppedEventArgs.

    • Directiva IgxRowDrag

      • IRowDragStartEventArgsyIRowDragEndEventArgs que cambien el nombre de Argument para que sea más claro a qué se refiere.owner argumento se renombra adragDirective. Elowner argumento ahora hace referencia al componente del propietario. Si tu código fuera así:

        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

      • La forma en que se manejaigx-combo la selección y la vinculación de datos cambia.

      • Si la entrada [valueKey] del combo está definida, el control buscará esa propiedad específica en el array de datos pasado al realizar la selección. Todos los eventos de selección se gestionan con el valor de la propiedad de los elementosvalueKey de datos. Todos los combos que hanvalueKey especificado deben tener su selección/bin-way binding consistir solo en los valores para la propiedad del objeto especificados 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 unvalueKey definido, todos los eventos de selección se gestionan con igualdad (===). Todos los combos que no tengan unvalueKey especificado deberían tener su selección/enlace bidireccional gestionado 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

    • Eligx-paginator componente se introduce como un componente independiente y también se utiliza en los componentes de la Red. Ten en cuenta que si tienes la opción configuradapaginationTemplate, puede que tengas que modificar tu CSS para mostrar correctamente la paginación. Esto se debe a que la plantilla ya no se aplica bajo un contenedor específico de paginación con reglas CSS para centrar el contenido, por lo que puede que necesites añadirlas 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

    • Al actualizar, si te encuentras con el siguiente errorPackage "@angular/compiler-cli" has an incompatible peer dependency to "typescript" (requires ">=3.1.1 <3.3", would install "3.4.5")., deberías actualizar@angular/core primero el paquete. Esto está relacionado con este conocido problema Angular de CLI
    • Al actualizar eligniteui-angular paquete, si ves el siguiente errorPackage "igniteui-angular" has an incompatible peer dependency to "web-animations-js" (requires "^2.3.1", would install "2.3.2-pr208"), deberías actualizar usandong update igniteui-angular --force. Esto podría pasar si actualizas@angular/core y@angular/cli antes de actualizarigniteui-angular.

    From 7.2.x or 7.3.x to 7.3.4

    • Si usas elfilterGlobal método deIgxGrid,IgxTreeGrid oIgxHierarchicalGrid, debes saber que elcondition parámetro ya no es opcional. Cuando elfilterGlobal método se llama con una condición inválida, no borrará los filtros existentes para todas las columnas.

    From 7.1.x to 7.2.x

    • Si usas un IgxCombo concombo.value, debes saber que ahoracombo.value solo es un que consigue un consejo.
    • Si lo usasIgxTextHighlightDirective, debes saber que lapage propiedad de entrada está obsoleta,rowIndex​columnIndex ypage las propiedades de laIActiveHighlightInfo interfaz también están obsoletas. En su lugar,row secolumn añaden propiedades opcionales.
    • Si usas elbutton-theme, debes saber que se$button-roundness ha reemplazado para cada tipo de botón por:$flat-border-radius,$raised-border-radius,$outline-border-radius,$fab-border-radius,.$icon-border-radius​

    From 7.0.x to 7.1.x

    • Si usas un IgxGrid con resúmenes en tu aplicación, deberías saber que ahora elIgxSummaryOperand.operate() método se llama con datos vacíos para calcular la altura necesaria para la fila de resumen. Para operandos de resumen personalizados, el método siempre debe devolver un array 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)
  }];
 }
}

    Desde la versión 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 usas un control IgxCombo en tu aplicación y tienes laitemsMaxWidth opción configurada, deberías cambiar esta opción aitemsWidth