igniteui-angular - npm Package Versions

igxForOf directive added

• igxForOf is now available as an alternative to ngForOf for templating large amounts of data. The igxForOf uses virtualization technology behind the scenes to optimize DOM rendering and memory consumption. Virtualization technology works similar to Paging by slicing the data into smaller chucks which are swapped from a container viewport while the user scrolls the data horizontally/vertically. The difference with the Paging is that virtualization mimics the natural behavior of the scrollbar.

igxToggle and igxToggleAction directives added

• igxToggle allows users to implement toggleable components/views (eg. dropdowns), while igxToggleAction can control the igxToggle directive. Refer to the official documentation for more information.
• igxToggle requires BrowserAnimationsModule to be imported in your application.

Ignite UI for Angular Theming - comprehensive set of Sass functions and mixins will give the ability to easily style your entire application or only certain parts of it.

• Previously bundled fonts, are now listed as external dependencies. You should supply both the Material Icons and Titillium Web fonts yourself by either hosting or using CDN.

igx-grid changes

• The component now uses the new igxForOf directive to virtualize its content both vertically and horizontally dramatically improving performance for applications displaying large amounts of data.
• Data-bound Input property filtering changed to filterable:

<igx-grid [data]="data">
    <igx-column [field]="'ReleaseDate'" [header]="'ReleaseDate'"
        [filterable]="true" dataType="date">
    </igx-column>
</igx-grid>

• @HostBinding min-width added to IgxGridCellComponent and IgxGridHeaderCell
• The IgxGridCellComponent no longer has a value setter, but instead has an update modifier.

<ng-template igxCell let-cell="cell">
    {{ cell.update("newValue") }}
</ng-template>

• Class IgxGridFiltering renamed to IgxGridFilteringComponent
• The grid filtering UI dropdowns are now controlled by the igxToggle directive.
  • Make sure to import BrowserAnimationsModule inside your application module as igxToggle uses animations for state transition.
• state input
  • filtering expressions and sorting expressions provided
• Removed onCellSelection and onRowSelection event emitters, onSelection added instead.
• Removed onBeforeProcess event emitter.
• Removed onMovingDone event emitter.
• Removed methods focusCell and focusRow.
• Renamed method filterData to filter.
• New methods filterGlobal and clearFilter.
• New method clearSort.
• Renamed method sortColumn to sort.
• New Input sortingIgnoreCase - Ignore capitalization of words.

igx-navigation-drawer changes

• NavigationDrawer renamed to IgxNavigationDrawerComponent
• NavigationDrawerModule renamed to IgxNavigationDrawerModule
• IgxNavigationDirectives renamed to IgxNavigationModule
• NavigationService renamed to IgxNavigationService
• NavigationToggle renamed to IgxNavigationToggleDirective
• NavigationClose renamed to IgxNavigationCloseDirective
• Content selector ig-drawer-content replaced with <ng-template igxDrawer>
• Content selector ig-drawer-mini-content replaced with <ng-template igxDrawerMini>
• CSS class ig-nav-drawer-overlay renamed to igx-nav-drawer__overlay
• CSS class ig-nav-drawer renamed to igx-nav-drawer

igxInput changes

• CSS class ig-form-group to igx-form-group

igxBadge changes

• From now on, the Badge position is set by css class, which specifies an absolute position as well as top/bottom/left/right properties. The Badge position input should not be used.

igx-avatar changes

• Initials type avatar is using SVG element from now on

igx-calendar changes

• formatViews - Controls whether the date parts in the different calendar views should be formatted according to the provided locale and formatOptions.
• templating - The igxCalendar supports now templating of its header and subheader parts.
• vertical input - Controls the layout of the calendar component. When vertical is set to true the calendar header will be rendered to the side of the calendar body.

igx-nav-bar changes

• Currently isActionButtonVisible resolves to false if actionButtonIcon is not defined.

igx-tab-bar changes

• custom content can be added for tabs

<igx-bottom-nav>
    <igx-tab-panel>
        <ng-template igxTab>
            <igx-avatar initials="T1">
            </igx-avatar>
        </ng-template>
        <h1>Tab 1 Content</h1>
    </igx-tab-panel>
</igx-bottom-nav>

igx-scroll component deleted

• igx-scroll component is not available anymore due newly implemented igxForOf directive.

igx-list changes

• igxEmptyList directive added The list no longer has emptyListImage, emptyListMessage, emptyListButtonText, emptyListButtonClick and hasNoItemsTemplate members. Instead of them, the igxEmptyListTemplateDirective can be used for templating the list when it is empty (or use the default empty template).

  <igx-list>
      <ng-template igxEmptyList>
          <p>My custom empty list template</p>
      </ng-template>
  </igx-list>
  

• onItemClicked event emitter added

  <igx-list (onItemClicked)="itemClicked()">
      <igx-list-item>Item 1</igx-list-item>
      <igx-list-item>Item 2</igx-list-item>
      <igx-list-item>Item 3</igx-list-item>
  </igx-list>
  

• Removed emptyListImage property from IgxListComponent.
• Removed emptyListMessage property from IgxListComponent.
• Removed emptyListButtonText property from IgxListComponent.
• Removed emptyListButtonClick event emitter from IgxListComponent.
• Removed hasNoItemsTemplate property from IgxListComponent.
• Removed options property from IgxListItemComponent.
• Removed left property from IgxListItemComponent.
• Removed href property from IgxListItemComponent.
• New emptyListTemplate input for IgxListComponent.
• New onItemClicked event emitter for IgxListComponent.
• New role property for IgxListComponent.
• New innerStyle property for IgxListComponent.
• New role property for IgxListItemComponent.
• New element property for IgxListItemComponent.
• New list property for IgxListItemComponent.
• New headerStyle property for IgxListItemComponent.
• New innerStyle property for IgxListItemComponent.

Renaming and restructuring directives and components based on the General Angular Naming Guidelines:

• IgxAvatar renamed to IgxAvatarComponent
• IgxBadge renamed to IgxBadgeComponent
• IgxButton renamed to IgxButtonDirective
• IgxButtonGroup renamed to IgxButtonGroupComponent
• IgxCardHeader renamed to IgxCardHeaderDirective
• IgxCardContent renamed to IgxCardContentDirective
• IgxCardActions renamed to IgxCardActionsDirective
• IgxCardFooter renamed to IgxCardFooterDirective
• IgxCarousel renamed to IgxCarouselComponent
• IgxInput renamed to IgxInputModule
• IgxInputClass renamed to IgxInputDirective
• IgxCheckbox renamed to IgxCheckboxComponent
• IgxLabel renamed to IgxLabelDirective
• IgxIcon renamed to IgxIconComponent
• IgxList renamed to IgxListComponent
• IgxListItem renamed to IgxListItemComponent
• IgxSlide renamed to IgxSlideComponent
• IgxDialog renamed to IgxDialogComponent
• IgxLayout renamed to IgxLayoutModule
• IgxNavbar renamed to IgxNavbarComponent
• IgxCircularProgressBar renamed to IgxCircularProgressBarComponent
• IgxLinearProgressBar renamed to IgxLinearProgressBarComponent
• IgxRadio renamed to IgxRadioComponent
• IgxSlider renamed to IgxSliderComponent
• IgxSnackbar renamed to IgxSnackbarComponent
• IgxSwitch renamed to IgxSwitchComponent
• IgxTabBar renamed to IgxBottomNavComponent
• IgxTabPanel renamed to IgxTabPanelComponent
• IgxTab renamed to IgxTabComponent
• IgxToast renamed to IgxToastComponent
• IgxLabelDirective moved inside ../directives/label/ folder
• IgxInputDirective moved inside ../directives/input/ folder
• IgxButtonDirective moved inside ../directives/button/ folder
• IgxLayoutDirective moved inside ../directives/layout/ folder
• IgxFilterDirective moved inside ../directives/filter/ folder
• IgxDraggableDirective moved inside ../directives/dragdrop/ folder
• IgxRippleDirective moved inside ../directives/ripple/ folder
• Folder "./navigation/nav-service" renamed to "./navigation/nav.service"