igniteui-angular - npm Package Versions

6.1.0

• igxOverlay service added. igxOverlayService allows you to show any component above all elements in page. For more detailed information see the official documentation
• Added igxRadioGroup directive. It allows better control over its child igxRadio components and support template-driven and reactive forms.
• Added column moving feature to igxGrid, enabled on a per-column level. Column moving allows you to reorder the igxGrid columns via standard drag/drop mouse or touch gestures. For more detailed information see the official documentation.
• igx-tab-bar selector removed from IgxBottomNavComponent.
• igxGrid filtering operands
• igxGrid
  • Breaking change filter_multiple method is removed. filter method and filteringExpressionsTree property could be used instead.
  • Breaking change filter method has new signature. It now accepts the following parameters:
    • name - the name of the column to be filtered.
    • value - the value to be used for filtering.
    • conditionOrExpressionTree - (optional) this parameter accepts object of type IFilteringOperation or IFilteringExpressionsTree. If only a simple filtering is required a filtering operation could be passes (see bellow for more info). In case of advanced filtering an expressions tree containing complex filtering logic could be passed.
    • ignoreCase - (optional) - whether the filtering would be case sensitive or not.
  • Breaking change onFilteringDone event now have only one parameter - IFilteringExpressionsTree which contains the filtering state of the filtered column.
  • filter_global method clears all existing filters and applies the new filtering condition to all grid's columns.
  • filtering operands:
    • Breaking change IFilteringExpression condition property is no longer a direct reference to a filtering condition method, instead it's a reference to an IFilteringOperation
    • 5 filtering operand classes are now exposed
      • IgxFilteringOperand is a base filtering operand, which can be inherited when defining custom filtering conditions
      • IgxBooleanFilteringOperand defines all default filtering conditions for boolean types
      • IgxNumberFilteringOperand defines all default filtering conditions for numeric types
      • IgxStringFilteringOperand defines all default filtering conditions for string types
      • IgxDateFilteringOperand defines all default filtering conditions for Date types
    • IgxColumnComponent now exposes a filters property, which takes an IgxFilteringOperand class reference
      • Custom filters can now be provided to grid columns by populating the operations property of the IgxFilteringOperand with operations of IFilteringOperation type

export class IgxCustomFilteringOperand extends IgxFilteringOperand {
    // Making the implementation singleton
    private static _instance: IgxCustomFilteringOperand = null;

    protected constructor() {
        super();
        this.operations = [{
            name: 'custom',
            logic: (target: string) => {
                return target === 'My custom filter';
            }
        }].concat(this.operations); // Keep the empty and notEmpty conditions from base
    }

    // singleton
    // Must implement this method, because the IgxColumnComponent expects it
    public static instance(): IgxCustomFilteringOperand {
        return this._instance || (this._instance = new this());
    }
}

• igxGrid now supports grouping of columns enabling users to create criteria for organizing data records. To explore the functionality start off by setting some columns as groupable:

  <igx-grid [data]="data">
      <igx-column [field]="'ProductName'"></igx-column>
      <igx-column [field]="'ReleaseDate'" [groupable]="true"></igx-column>
  </igx-grid>
  

  For more information, please head over to igxGrid's ReadMe or the official documentation.

• igxGrid now supports multi-column headers allowing you to have multiple levels of columns in the header area of the grid. For more information, head over to official documentation

• igxGrid theme now has support for alternating grid row background and text colors.

• igxGrid now has a toolbar (shown using the showToolbar property) which contains the following features:

  • title (specified using the toolbarTitle property)
  • column hiding feature (enabled using the columnHiding property)
  • column pinning feature (enabled using the columnPinning property)
  • export to excel (enabled using the exportExcel property)
  • export to CSV (enabled using the exportCsv property)

• igxColumn changes:

  • Breaking change filteringExpressions property is removed.

• igxGrid API is updated

  • Breaking change deleteRow(rowSelector: any) method will delete the specified row only if the primary key is defined. The method accept rowSelector as a parameter, which is the rowID.
  • Breaking change updateRow(value: any, rowSelector: any) method will update the specified row only if the primary key is defined. The method accept value and rowSelector as a parameter, which is the rowID.
  • Breaking change updateCell(value: any, rowSelector: any, column: string) method will update the specified cell only if the primary key is defined. The method accept value, rowSelector,which is the rowID and column name.
  • getCellByKey(rowSelector: any, columnField: string) method is added to grid's API. This method retuns a cell or undefined only if primary key is defined and search for the specified cell by the rowID and column name.
  • getCellByColumn(rowIndex: number, columnField: string) method is updated. This method returns a cell or undefined by using rowIndex and column name.

• IgxGridRow API is updated:

  • update(value: any) method is added. The method takes as a parameter the new value, which is to be set to the specidied row.
  • delete() method is added. The method removes the specified row from the grid's data source.

• igxCell default editing template is changed according column data type. For more information you can read the specification or the official documentation

• igxCombo component added

  <igx-combo #combo [data]="towns" [displayKey]="'townName'" [valueKey]="'postCode'" [groupKey]="'province'"
      [allowCustomValues]="true" placeholder="Town(s)" searchPlaceholder="Search town..."></igx-combo>
  

  igxCombo features:

    - Data Binding
    - Value Binding
    - Virtualized list
    - Multiple Selection
    - Filtering
    - Grouping
    - Custom values
    - Templates
    - Integration with Template Driven and Reactive Forms
    - Keyboard Navigation
    - Accessibility compliance
  

  For more detailed information see the official igxCombo documentation.

• igxDropdown component added

  <igx-drop-down (onSelection)="onSelection($event)" (onOpening)="onOpening($event)">
      <igx-drop-down-item *ngFor="let item of items" disabled={{item.disabled}} isHeader={{item.header}}>
              {{ item.field }}
      </igx-drop-down-item>
  </igx-drop-down>
  

  igxDropDown displays a scrollable list of items which may be visually grouped and supports selection of a single item. Clicking or tapping an item selects it and closes the Drop Down.

  A walkthrough of how to get started can be found here

  igxDropdown features:

    - Single Selection
    - Grouping
    - Keyboard Navigation
    - Accessibility compliance
  

• igxChip and igxChipsArea components added

  <igx-chips-area>
      <igx-chip *ngFor="let chip of chipList" [id]="chip.id">
          <label igxLabel>{{chip.text}}</label>
      </igx-chip>
  </igx-chips-area>
  

  For more detailed information see the official igxChip documentation.

• igxToggle changes

  • onOpening event added.
  • onClosing event added.

• igxToggleAction new overlaySettings input controls how applicable targets display content. Provides defaults with positioning based on the host element. The closeOnOutsideClick input is deprecated in favor of the new settings and will be removed in the future.

• igxList now supports a 'loading' template which is shown when the list is empty and its new isLoading property is set to true. You can redefine the default loading template by adding an ng-template with the igxDataLoading directive:

  <igx-list [isLoading]="true">
      <ng-template igxDataLoading>
          <p>Please wait, data is loading...</p>
      </ng-template>
  </igx-list>
  

• Breaking changes:

  • Removed submodule imports. All imports are now resolved from the top level igniteui-angular package.
  • igxGrid changes:
    • sort API now accepts params of type ISortingExpression or Array<ISortingExpression>.
  • igxToggle changes
    • collapsed now read-only, markup input is removed.
    • onOpen event renamed to onOpened.
    • onClose event renamed to onClosed.
    • open method does not accept fireEvents optional boolean parameter. Now it accepts only overlaySettings optional parameter of type OverlaySettings.
    • close method does not accept fireEvents optional boolean parameter.
    • toggle method does not accept fireEvents optional boolean parameter. Now it accepts only overlaySettings optional parameter of type OverlaySettings.
  • igxDialog changes
    • open method does not accept fireEvents boolean parameter. Now it accepts only overlaySettings optional parameter of type OverlaySettings.

• Breaking change All properties that were named isDisabled have been renamed to disabled in order to acheive consistency across our component suite. This affects: date-picker, input directive, input-group, dropdown-item, tabbar and time-picker.

• The deprecated igxForRemote input for the igxFor directive is now removed. Setting the required totalItemCount property after receiving the first data chunk is enough to trigger the required functionality.

6.0.4

• igxRadioGroup directive introduced. It allows better control over its child igxRadio components and support template-driven and reactive forms.
• Fixed ReactiveForms validations support for IgxInputGroup. Related issue.

6.0.3

• igxGrid exposing the filteredSortedData method publicly - returns the grid data with current filtering and sorting applied.

6.0.2

• igxGrid Improve scrolling on mac #1563
• The ng update igniteui-angular migration schematics now also update the theme import path in SASS files. #1582

6.0.1

• Introduced migration schematics to integrate with the Angular CLI update command. You can now run

  ng update igniteui-angular

  in existing projects to both update the package and apply any migrations needed to your project. Make sure to commit project state before proceeding. Currently these cover converting submodule imports as well as the deprecation of igxForRemote and rename of igx-tab-bar to igx-bottom-nav from 6.0.0.

• Breaking changes:

  • Removed submodule imports. All imports are now resolved from the top level igniteui-angular package. You can use ng update igniteui-angular when updating to automatically convert existing submodule imports in the project.
  • Summary functions for each IgxSummaryOperand class has been made static. So now you can use them in the following way:

  import { IgxNumberSummaryOperand, IgxSummaryOperand } from "igniteui-angular";
  class CustomSummary extends IgxSummaryOperand {
  constructor() {
    super();
  }
  public operate(data?: any[]) {
    const result = super.operate(data);
    result.push({
      key: "Min",
      label: "Min",
      summaryResult: IgxNumberSummaryOperand.min(data)
    });
    return result;
  }
  }