Angular Breaking Changes in Ignite UI for Angular

    This topic provides information about breaking changes in Ignite UI for Angular as well as how to update older code to latest API.

    Changed name of PropertyPath

    The data grid component property propertyPath has been renamed to field. This applies to all Column types, GroupDescription, SortDescription & SummaryDescription.

    Note

    These breaking changes were introduce in version {PackageVerChangedFields} of the grid package.

    Changed Name of Live Grid

    The data grid component and it's corresponding module's names have changed from "LiveGrid" to "DataGrid".

    Note

    These breaking changes were introduce in version {PackageVerRenamedGrid} of these packages and components:

    The new code for importing the grid and it's corresponding module is:

    Required Peer Dependency for Data Grid

    The data grid component requires the "inputs" package.

    **npm install --save {PackageInputs}**

    Changed Import Statements

    Import statements have been simplified to use just package names instead of full paths to API classes and enums.

    Note

    These breaking changes were introduce in version 8.2.12 of these packages and components:

    Affected Packages Affected Components
    igniteui-angular-excel Excel Library
    igniteui-angular-spreadsheet Spreadsheet
    igniteui-angular-maps Geo Map, Treemap
    igniteui-angular-gauges Bullet Graph, Linear Gauge, Radial Gauge
    igniteui-angular-charts Category Chart, Data Chart, Donut Chart, Financial Chart, Pie Chart, Zoom Slider
    igniteui-angular-core most classes and enums

    Code After Changes

    Now, you need to use just package names instead of full paths to API classes and enums.

    // gauges:
import { IgxLinearGauge } from "igniteui-angular-gauges";
import { IgxLinearGaugeModule } from "igniteui-angular-gauges";
import { IgxLinearGraphRange } from "igniteui-angular-gauges";

import { IgxRadialGauge } from 'igniteui-angular-gauges}';
import { IgxRadialGaugeModule } from 'igniteui-angular-gauges';
import { IgxRadialGaugeRange } from 'igniteui-angular-gauges';
import { SweepDirection } from 'igniteui-angular-core';

// charts:
import { IgxFinancialChartComponent } from "igniteui-angular-charts";
import { IgxFinancialChartModule } from "igniteui-angular-charts";
import { IgxDataChartComponent } from "igniteui-angular-charts";
import { IgxDataChartCoreModule } from "igniteui-angular-charts";

// maps:
import { IgxGeographicMapComponent } from "igniteui-angular-maps";
import { IgxGeographicMapModule } from "igniteui-angular-maps";

    Code Before Changes

    Before, you had to import using full paths to API classes and enums:

    // gauges:
import { IgxLinearGaugeComponent } from 'igniteui-webcomponents-gauges/ES5/igx-linear-gauge-component';
import { IgxLinearGaugeModule } from 'igniteui-webcomponents-gauges/ES5/igx-linear-gauge-module';
import { IgxLinearGraphRange } from 'igniteui-webcomponents-gauges/ES5/igx-linear-graph-range';

import { IgxRadialGaugeComponent } from "igniteui-webcomponents-gauges/ES5/igx-radial-gauge-component";
import { IgxRadialGaugeModule } from "igniteui-webcomponents-gauges/ES5/igx-radial-gauge-module";
import { IgxRadialGaugeRange } from "igniteui-webcomponents-gauges/ES5/igx-radial-gauge-range";
import { SweepDirection } from "igniteui-webcomponents-core/ES5/SweepDirection";

// charts:
import { IgxFinancialChartComponent } from "igniteui-webcomponents-charts/ES5/igx-financial-chart-component";
import { IgxFinancialChartModule } from "igniteui-webcomponents-charts/ES5/igx-financial-chart-module";
import { IgxDataChartComponent } from "igniteui-webcomponents-charts/ES5/igx-data-chart-component";
import { IgxDataChartCoreModule } from "igniteui-webcomponents-charts/ES5/igx-data-chart-core-module";

// maps:
import { IgxGeographicMapComponent } from "igniteui-webcomponents-maps/ES5/igx-geographic-map-component";
import { IgxGeographicMapModule } from "igniteui-webcomponents-maps/ES5/igx-geographic-map-module";