All notable changes for each version of this project will be documented in this file.
- Removed the
dirty
local template variable previously exposed by theigxFor
directive. - 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.
hammerjs
and@types/hammerjs
are removed frompeerDependencies
and were added asdependencies
. So if you are using Igniteui-Angular version 5.2.1 or above it is enough to runnpm install igniteui-angular
in your project for getting started. For more detailed information seeIgnite 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 todist/docs/sass
and openindex.html
file.
-
igxForOf
directive addedigxForOf
is now available as an alternative tongForOf
for templating large amounts of data. TheigxForOf
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
andigxToggleAction
directives addedigxToggle
allows users to implement toggleable components/views (eg. dropdowns), whileigxToggleAction
can control theigxToggle
directive. Refer to the official documenation for more information.igxToggle
requiresBrowserAnimationsModule
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 tofilterable
:
<igx-grid [data]="data"> <igx-column [field]="'ReleaseDate'" [header]="'ReleaseDate'" [filterable]="true" dataType="date"> </igx-column> </igx-grid>
- @HostBinding
min-width
added toIgxGridCellComponent
andIgxGridHeaderCell
- 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 toIgxGridFilteringComponent
- The grid filtering UI dropdowns are now controlled by the
igxToggle
directive.- Make sure to import
BrowserAnimationsModule
inside your application module asigxToggle
uses animations for state transition.
- Make sure to import
state
input- filtering expressions and sortin expressions provided
- Removed
onCellSelection
andonRowSelection
event emitters,onSelection
added instead. - Removed
onBeforeProcess
event emitter. - Removed
onMovingDone
event emitter. - Removed methods
focusCell
andfocusRow
. - Renamed method
filderData
tofilter
. - New methods
filterGlobal
andclearFilter
. - New method
clearSort
. - Renamed method
sortColumn
tosort
. - New Input
sortingIgnoreCase
- Ignore capitalization of words.
- The component now uses the new
-
igx-navigation-drawer
changesNavigationDrawer
renamed toIgxNavigationDrawerComponent
NavigationDrawerModule
renamed toIgxNavigationDrawerModule
IgxNavigationDirectives
renamed toIgxNavigationModule
NavigationService
renamed toIgxNavigationService
NavigationToggle
renamed toIgxNavigationToggleDirective
NavigationClose
renamed toIgxNavigationCloseDirective
- 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 toigx-nav-drawer__overlay
- CSS class
ig-nav-drawer
renamed toigx-nav-drawer
-
igxInput
changes- CSS class
ig-form-group
toigx-form-group
- CSS class
-
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 -
igx-calendar
changesformatViews
- Controls whether the date parts in the different calendar views should be formatted according to the providedlocale
andformatOptions
.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 totrue
the calendar header will be rendered to the side of the calendar body.
-
igx-nav-bar
changes- Currently
isActionButtonVisible
resolves tofalse
if actionButtonIcon is not defined.
- Currently
-
igx-tab-bar
changes- custom content can be added for tabs
<igx-tab-bar> <igx-tab-panel> <ng-template igxTab> <igx-avatar initials="T1"> </igx-avatar> </ng-template> <h1>Tab 1 Content</h1> </igx-tab-panel> </igx-tab-bar>
-
igx-scroll
component deletedigx-scroll
component is not available anymore due newly implementedigxForOf
directive.
-
igxEmptyList
directive added The list no longer hasemptyListImage
,emptyListMessage
,emptyListButtonText
,emptyListButtonClick
andhasNoItemsTemplate
members. Instead of them, theigxEmptyListTemplateDirective
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 fromIgxListComponent
. - Removed
emptyListMessage
property fromIgxListComponent
. - Removed
emptyListButtonText
property fromIgxListComponent
. - Removed
emptyListButtonClick
event emitter fromIgxListComponent
. - Removed
hasNoItemsTemplate
property fromIgxListComponent
. - Removed
options
property fromIgxListItemComponent
. - Removed
left
property fromIgxListItemComponent
. - Removed
href
property fromIgxListItemComponent
. - New
emptyListTemplate
input forIgxListComponent
. - New
onItemClicked
event emitter forIgxListComponent
. - New
role
property forIgxListComponent
. - New
innerStyle
property forIgxListComponent
. - New
role
property forIgxListItemComponent
. - New
element
property forIgxListItemComponent
. - New
list
property forIgxListItemComponent
. - New
headerStyle
property forIgxListItemComponent
. - New
innerStyle
property forIgxListItemComponent
.
-
Renaming and restructuring directives and components based on the General Angular Naming Guidelines:
IgxAvatar
renamed toIgxAvatarComponent
IgxBadge
renamed toIgxBadgeComponent
IgxButton
renamed toIgxButtonDirective
IgxButtonGroup
renamed toIgxButtonGroupComponent
IgxCardHeader
renamed toIgxCardHeaderDirective
IgxCardContent
renamed toIgxCardContentDirective
IgxCardActions
renamed toIgxCardActionsDirective
IgxCardFooter
renamed toIgxCardFooterDirective
IgxCarousel
renamed toIgxCarouselComponent
IgxInput
renamed toIgxInputModule
IgxInputClass
renamed toIgxInputDirective
IgxCheckbox
renamed toIgxCheckboxComponent
IgxLabel
renamed toIgxLabelDirective
IgxIcon
renamed toIgxIconComponent
IgxList
renamed toIgxListComponent
IgxListItem
renamed toIgxListItemComponent
IgxSlide
renamed toIgxSlideComponent
IgxDialog
renamed toIgxDialogComponent
IgxLayout
renamed toIgxLayoutModule
IgxNavbar
renamed toIgxNavbarComponent
IgxCircularProgressBar
renamed toIgxCircularProgressBarComponent
IgxLinearProgressBar
renamed toIgxLinearProgressBarComponent
IgxRadio
renamed toIgxRadioComponent
IgxSlider
renamed toIgxSliderComponent
IgxSnackbar
renamed toIgxSnackbarComponent
IgxSwitch
renamed toIgxSwitchComponent
IgxTabBar
renamed toIgxTabBarComponent
IgxTabPanel
renamed toIgxTabPanelComponent
IgxTab
renamed toIgxTabComponent
IgxToast
renamed toIgxToastComponent
IgxLabelDirective
moved inside../directives/label/
folderIgxInputDirective
moved inside../directives/input/
folderIgxButtonDirective
moved inside../directives/button/
folderIgxLayoutDirective
moved inside../directives/layout/
folderIgxFilterDirective
moved inside../directives/filter/
folderIgxDraggableDirective
moved inside../directives/dragdrop/
folderIgxRippleDirective
moved inside../directives/ripple/
folder- Folder
"./navigation/nav-service"
renamed to"./navigation/nav.service"