Ignite UI for Angular Change Log

All notable changes for each version of this project will be documented in this file.

5.3.0

Added rowSelectable property to igxGrid
- Setting rowSelectable to true enables multiple row selection for the igx-grid component. Adds a checkbox column that allows (de)selection of one, multiple or all (via header checkbox) rows.
- For more information about the rowSelectable property and working with grid row, please read the igxGrid's ReadMe about selection or see the official documentation
Added onContextMenu output to igxGrid to emit the clicked cell.
igxTextSelection directive added
- igxTextSelection directive allows you to select the whole text range for every element with text content it is applied.
igxFocus directive added
- igxFocus directive allows you to force focus for every element it is applied.
igx-time-picker component added
- igx-time-picker allows user to select time, from a dialog with spinners, which is presented into input field.
- For more information navigate to the ReadMe.
igx-tab-bar changes
- Breaking changes: IgxTabBarComponent is renamed to IgxBottomNavComponent and IgxTabBarModule is renamed to IgxBottomNavModule.
- igx-tab-bar selector is deprecated. Use igx-bottom-nav selector instead.
igx-tabs component added
- igx-tabs allows users to switch between different views. The igx-tabs component places the tabs headers at the top and allows scrolling when there are multiple tab items outside the visible area. Tabs are ordered in a single row above their associated content.
- For more information navigate to ReadMe.
Added column pinning in the list of features available for igxGrid. Pinning is available though the API. Try the following:
```
const column = this.grid.getColumnByName(name);
column.pin();
```
For more information, please head over to igxGrid's ReadMe or the official documentation.
Added summaries feature to igxGrid, enabled on a per-column level. Grid summaries gives you a predefined set of default summaries, depending on the type of data in the column. For more detailed information read igxGrid's ReadMe or see the official documentation.
Added columnWidth option to igxGrid. The option sets the default width that will be applied to columns that have no explicit width set. For more detailed information read igxGrid's ReadMe
Added API to igxGrid that allows for vertical remote virtualization. For guidance on how to implement such in your application, please refer to the official documentation
Added smooth scrolling for the igxForOf directive making the scrolling experience both vertically and horizontally much more natural and similar to a native scroll.
Added onCellClick event.

igxForOf now requires that its parent container's overflow is set to hidden and position to relative. It is recommended that its height is set as well so that the display container of the virtualized content can be positioned with an offset inside without visually affecting other elements on the page.

<div style='position: relative; height: 500px; overflow: hidden'>
    <ng-template igxFor let-item [igxForOf]="data" #virtDirVertical
            [igxForScrollOrientation]="'vertical'"
            [igxForContainerSize]='"500px"'
            [igxForItemSize]='"50px"'
            let-rowIndex="index">
            <div style='height:50px;'>{{rowIndex}} : {{item.text}}</div>
    </ng-template>
</div>

Removed the dirty local template variable previously exposed by the igxFor directive.
The igxForRemote input for the igxFor directive is now deprecated. Setting the required totalItemCount property after receiving the first data chunk is enough to trigger the required functionality.
the igx-icon component can now work with both glyph and ligature-based icon font sets. We've also included a brand new Icon Service, which helps you create aliases for the icon fonts you've included in your project. The service also allows you to define the default icon set used throughout your app.
Added the option to conditionally disable the igx-ripple directive through the igxRippleDisabled property.
Updated styling and interaction animations of the igx-checkbox, igx-switch, and igx-radio components.
Added indeterminate property and styling to the igx-checkbox component.
Added required property to the igx-checkbox, igx-radio, and igx-switch components.
Added igx-ripple effect to the igx-checkbox, igx-switch, and igx-radio components. The effect can be disabled through the disableRipple property.
Added the ability to specify the label location in the igx-checkbox, igx-switch, and igx-radio components through the labelPosition property. It can either be before or after.
You can now use any element as label on the igx-checkbox, igx-switch, and igx-radio components via the aria-labelledby property.
You can now have invisible label on the igx-checkbox, igx-switch, and igx-radio components via the aria-label property.
Added the ability to toggle the igx-checkbox and igx-switch checked state programmatically via toggle method on the component instance.
Added the ability to select an igx-radio programmatically via select method on the component instance.
Fixed a bug on the igx-checkbox and igx-radio components where the click event was being triggered twice on click.
Fixed a bug where the igx-checkbox, igx-switch, and igx-radio change event was not being triggered on label click.
igxМask directive added
- igxМask provide means for controlling user input and formatting the visible value based on a configurable mask rules. For more detailed information see igxMask README file
igxInputGroup component added - used as a container for the igxLabel, igxInput, igxPrefix, igxSuffix and igxHint directives.
igxPrefix directive added - used for input prefixes.
igxSuffix directive added - used for input suffixes.
igxHint directive added - used for input hints.
igxInput directive breaking changes:
- the directive should be wrapped by igxInputGroup component
- IgxInputGroupModule should be imported instead of IgxInputModule
igxExcelExportService and igxCSVExportService added. They add export capabilities to the igxGrid. For more information, please visit the igxExcelExportService specification and the igxCSVExportService specification.
General
- Added event argument types to all EventEmitter @Outputs. #798 #740
- Reviewed and added missing argument types to the following EventEmitters
  - The igxGrid onEditDone now exposes arguments of type IGridEditEventArgs. The arguments expose row and cell objects where if the editing is performed on a cell, the edited cell and the row the cell belongs to are exposed. If row editing is performed, the cell object is null. In addition the currentValue and newValue arguments are exposed. If you assign a value to the newValue in your handler, then the editing will conclude with the value you've supplied.
  - The igxGrid onSelection now correctly propagates the original event in the IGridCellEventArgs.
- Added jsZip as a Peer Dependency.
primaryKey attribute added to igxGrid
- primaryKey allows for a property name from the data source to be specified. If specified, primaryKey can be used instead of index to indentify grid rows from the igxGrid.rowList. As such, primaryKey can be used for selecting rows for the following igxGrid methods - deleteRow, updateRow, updateCell, getCellByColumn, getRowByKey
- primaryKey requires all of the data for the specified property name to have unique values in order to function as expected.
- as it provides a unique identifier for each data member (and therefore row), primaryKey is best suited for addressing grid row entries. If DOM virtualization is in place for the grid data, the row index property can be reused (for instance, when filtering/sorting the data), whereas primaryKey remains unique. Ideally, when a persistent reference to a row has to be established, primaryKey should be used.

5.2.1

hammerjs and @types/hammerjs are removed from peerDependencies and were added as dependencies. So if you are using Igniteui-Angular version 5.2.1 or above it is enough to run npm install igniteui-angular in your project for getting started. For more detailed information see Ignite UI for Angular Getting Started
web-animations-js is added as Peer Dependency.
Theming bug fixes and improvements.
Use the following command to generate Ignite UI for Angular Themes documentation - npm run build:docs. Navigate to dist/docs/sass and open index.html file.

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 documenation 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 sortin 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 filderData 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"

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CHANGELOG.md

CHANGELOG.md

Ignite UI for Angular Change Log

5.3.0

5.2.1

5.2.0

Files

CHANGELOG.md

Latest commit

History

CHANGELOG.md

File metadata and controls

Ignite UI for Angular Change Log

5.3.0

5.2.1

5.2.0