12.1.0-alpha.5

New Features

• Added IgxAccordion component

  • A collection of vertically collapsible igx-expansion-panels that provide users with data and the ability to navigate through it in a compact manner. The control is not data bound and takes a declarative approach, giving users more control over what is being rendered.
  • Exposed API to control the expansion state, easy-to-use keyboard navigation, option for nested accordions.
  • Code example below:

  <igx-accordion>
      <igx-expansion-panel *ngFor="let panel of panels">
         ...
      </igx-expansion-panel>
  </igx-accordion>

  • For more information, check out the README, specification and official documentation

• igxGrid

  • New additionalTemplateContext column input:

  <igx-column [additionalTemplateContext]="contextObject">
    <ng-template igxCell let-cell="cell" let-props="additionalTemplateContext">
       {{ props }}
    </ng-template>
  </igx-column>

• IgxGrid, IgxTreeGrid, IgxHierarchicalGrid

  • Added batchEditing - an Input property for controlling what type of transaction service is provided for the grid.
    Setting <igx-grid [batchEditing]="true"> is the same as providing [{ provide: IgxGridTransaction, useClass: IgxTransactionService }].
  • Deprecation - Providing a transaction service for the grid via providers: [IgxTransactionService] is now deprecated and will be removed in a future patch.
    Instead, use the new batchEditing property to control the grid's Transactions.

  <igx-grid #grid [data]="data" [batchEditing]="true">
      ...
  </igx-grid>
  <button igxButton (click)="grid.transactions.undo">Undo</button>

• Transactions

  • Added IgxFlatTransactionFactory - the singleton service instantiates a new TransactionService<Transaction, State> given a transaction type.
  • Added IgxHierarchicalTransactionFactory - the singleton service instantiates a new HierarchicalTransactionService<HierarchicalTransaction, HierarchicalState> given a transaction type.

• Toolbar Actions

  • Exposed a new input property overlaySettings for all column actions (hiding | pinning | advanced filtering | exporter). Example below:

  <igx-grid-toolbar-actions>
      <igx-grid-toolbar-pinning [overlaySettings]="overlaySettingsGlobal"></igx-grid-toolbar-pinning>
      <igx-grid-toolbar-hiding [overlaySettings]="overlaySettingsAuto"></igx-grid-toolbar-hiding>
  </igx-grid-toolbar-actions>

• IgxPaginatorComponent

  • Added paging and pagingDone events; paging event is cancellable and is emitted before pagination is performed, pagingDone event gives you information about the previous and the current page number and is not cancellable; Also IgxPageSizeSelectorComponent and IgxPageNavigationComponent are introduced and now the paginator components allows you to define a custom content, as it is shown in the example below:

  <igx-paginator #paginator>
      <igx-paginator-content>
          <igx-page-size></igx-page-size>
          <button [disabled]="paginator.isFirstPage" (click)="paginator.previousPage()">PREV</button>
          <span>Page {{paginator.page}} of {{paginator.totalPages}}</span>
          <button [disabled]="paginator.isLastPage" (click)="paginator.nextPage()">NEXT</button>
      </igx-paginator-content>
  </igx-paginator>

• Exporters's columnExporting event now supports changing the index of the column in the exported file.

      this.excelExporterService.columnExporting.subscribe((col) => {
          if (col.field === 'Index') {
              col.columnIndex = 0;
          }
      });

• IgxExcelExporterService

  • Added support for exporting the grids' multi-column headers to Excel. By default, the multi-column headers would be exported but this behavior can be controlled by the ignoreMultiColumnHeaders option off the IgxExcelExporterOptions object.

• IgxDateTimeEditor, IgxMask, IgxDatePicker, IgxTimePicker, IgxDateRangePicker

  • Added IME input support. When typing in an Asian language input, the control will display input method compositions and candidate lists directly in the control’s editing area, and immediately re-flow surrounding text as the composition ends.

General

• IgxGridComponent

  • The following properties are deprecated:
    • paging
    • perPage
    • page
    • totalPages
    • isFirstPage
    • isLastPage
    • pageChange
    • perPageChange
    • pagingDone
  • The following methods, also are deprecated:
    • nextPage()
    • previousPage()
  • Breaking Change the following property has been removed
    • paginationTemplate

• IgxPaginatorComponent

  • Deprecated properties selectLabel and prepositionPage are now removed;
  • Breaking Change - the following properties are removed
    • pagerEnabled
    • pagerHidden
    • dropdownEnabled
    • dropdownHidden

• IgxSnackbarComponent

  • Deprecated property message is now removed;
  • Breaking Change - the snackbarAnimationStarted and snackbarAnimationDone methods are now removed. The animationStarted and animationDone events now provide reference to the ToggleViewEventArgs interface as an argument and are emitted by the onOpened and onClosed events of the IgxToggleDirective.

• IgxToastComponent

  • Deprecated property message is now removed;
  • Breaking Change - The isVisibleChange event now provides reference to the ToggleViewEventArgs interface as an argument.

• Breaking Change - IgxOverlayService events are renamed as follows:

  • onOpening -> opening
  • onOpened -> opened
  • onClosing -> closing
  • onClosed -> closed
  • onAppended -> contentAppended
  • onAnimation -> animationStarting

• Breaking Change - IgxBannerComponent events are renamed as follows:

  • onOpening -> opening
  • onOpened -> opened
  • onClosing -> closing
  • onClosed -> closed

• IgxExpansionPanelComponent

  • Breaking Change - IgxExpansionPanelComponent events are renamed as follows:

    • onCollapsed -> contentCollapsed
    • onExpanded -> contentExpanded

  • Breaking Change - IgxExpansionPanelHeaderComponent events are renamed as follows:

    • onInteraction -> interaction

  • Behavioral Change - Settings disabled property of IgxExpansionPanelHeaderComponent now makes the underlying header element not accessible via Tab navigation (via tabindex="-1")

  • Feature - Added contentExpanding and contentCollapsing events, fired when the panel's content starts expanding or collapsing, resp.
    Both events can be canceled, preventing the toggle animation from firing and the collapsed property from changing:

      <igx-expansion-panel (contentExpanding)="handleExpandStart($event)" (contentCollapsing)="handleCollapseStart($event)">
          ...
      </igx-expansion-panel>

• IgxDropDown

  • Breaking Change - The dropdown items no longer takes focus unless allowItemsFocus is set to true.

Themes

• Breaking Change - The $color property of the igx-action-strip-theme has been renamed as follows:
  • $color -> $icon-color