igniteui-angular - npm Package Versions

5.2.0

• 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"

15.1.0

New Features

• IgxGrid, IgxTreeGrid, IgxHierarchicalGrid:

  • GroupMemberCountSortingStrategy is added, which can be used to sort the grid by number of items in each group in ASC or DESC order, if grouping is applied.
  • A new argument primaryKey has been introduced to IRowDataEventArgs Interface and part of the event arguments that are emitted by the rowAdded and rowDeleted events. When the grid has a primary key attribute added, then the emitted primaryKey event argument represents the row ID, otherwise it defaults to undefined.
  • Added the autoGenerateExclude property that accepts an array of strings for property names that are to be excluded from the generated column collection

• IgxColumnComponent

  • Added currRec and groupRec parameters to the groupingComparer function that give access to the all properties of the compared records.

• IgxOverlayService

  • A new event contentAppending is introduced - the event is emitted before the content is appended to the overlay. The event is emitted with OverlayEventArgs arguments and is not cancellable.

• IgxCard

  • Buttons and icons slotted in the igx-card-actions can now be explicitly arranged to the start/end of the layout. To position components on either side users can take advantage of the newly added directives: igxStart - aligns items to the start and igxEnd - aligns items on the end of the card actions area.

  • The reverse property has been deprecated and will be removed in a future version.

  • Code example:

  <igx-card>
      <igx-card-header>
          <h3>Title</h3>
      </igx-card-header>
      <igx-card-content>
          Card Content
      </igx-card-content>
  
      <!-- Rearrange items using igxStart and igxEnd directives -->
      <igx-card-actions>
          <igx-icon igxStart>drag_indicator</igx-icon>
          <button igxButton="icon" igxStart>
              <igx-icon>favorite</igx-icon>
          </button>
          <button igxButton igxEnd>Button</button>
      </igx-card-actions>
  </igx-card>
  

• IgxButtonGroup:

  • The selected and deselected events are now cancellable.

General

• IgxPivotGrid
  • The IgxPivotDateDimension properties inBaseDimension and inOption have been deprecated and renamed to baseDimension and options respectively.
• IgxGrid
  • Breaking Change The onGroupingDone output has been renamed to groupingDone to not violate the no on-prefixed outputs convention. Automatic migrations are available and will be applied on ng update.
  • Column formatters are now applied to values shown group rows when using the default template. For custom formatters, the formatter function is called with the data from the first row in the group.
• DisplayDensity
  • Breaking Change The onDensityChanged output has been renamed to densityChanged to not violate the no on-prefixed outputs convention. All components exposing this event are affected. Automatic migrations are available and will be applied on ng update.
• IgxGrid, IgxTreeGrid, IgxHierarchicalGrid
  • Breaking Change - rowSelectionChanging event arguments are changed. Now the oldSelection, newSelection, added and removed collections no longer consist of the row keys of the selected elements when the grid has set a primaryKey, but now in any case the row data is emitted. When the grid is working with remote data and a primary key has been set- for the selected rows that are not currently part of the grid view, will be emitted a partial row data object.
  • Behavioral Change - When selected row is deleted from the grid component rowSelectionChanging event will no longer be emitted.
• IgxCarousel
  • Breaking Change The onSlideChanged, onSlideAdded, onSlideRemoved, onCarouselPaused and onCarouselPlaying outputs have been renamed to slideChanged, slideAdded, slideRemoved, carouselPaused and carouselPlaying to not violate the no on-prefixed outputs convention. Automatic migrations are available and will be applied on ng update.
• IgxRadio, IgxRadioGroup, IgxCheckbox, IgxSwitch
  • Added component validation along with styles for invalid state
• igxMask directive
  • Added the capability to escape mask pattern literals.
• IgxBadge
  • Added shape property that controls the shape of the badge and can be either square or rounded. The default shape of the badge is rounded.
• IgxAvatar
  • Breaking Change The roundShape property has been deprecated and will be removed in a future version. Users can control the shape of the avatar by the newly added shape attribute that can be square, rounded or circle. The default shape of the avatar is square.
• IgxOverlayService
  • attach method overload accepting ComponentFactoryResolver (trough NgModuleRef-like object) is now deprecated in line with API deprecated in Angular 13. New overload is added accepting ViewComponentRef that should be used instead.
• Breaking Changes - $label-floated-background and $label-floated-disabled-background properties of IgxInputGroupComponent theme has been removed.
• IgxInputGroupComponent The input group has been refactored so that the floating label for the input of type="border" does not require a background to match the surface background under the input field. Also, suffixes and prefixes are refactored to take the full height of the input which makes it easy to add background to them.
• Breaking Changes - $size property of scrollbar-theme theme has been renamed to $scrollbar-size.
• IgxSimpleCombo
  • The IgxSimpleCombo will not open its drop-down on clear.

11.0.4

General

• IgxGrid, IgxTreeGrid, IgxHierarchicalGrid
  • a new property event has been introduced to IGridEditEventArgs and IGridEditDoneEventArgs; the property represents the original DOM event that triggers any of Grid editing events like rowEditEnter, cellEditEnter, cellEdit, cellEditDone, cellEditExit, rowEdit, rowEditDone, rowEditExit
  • Behavioral Change - When there isn't a previous active node and the user enters the grid using tab or shift + tab key: the first fully visible element is activated: /no scroll bar positioning is reset/changed; If there is a previous active node in the grid - the previously active node is reactivated without resetting the scroll positions; If we follow the default tab navigation and we are currently on a data cell with / rowIndex: -1, columnIndex: 6/ for example when we tab down to the root summaries the summary cell with visible column index 6 should be activated and scroll into the view; The same applies if you shift+tab to the headers header cell with visible index 6 is activated and scrolled into the view; If you have an active node and go to another tab and then return back the active node and the current scroll position should not be changed;