igniteui-angular
Advanced tools
Changelog
6.0.0
onDoubleClick
output to igxGrid
to emit the double clicked cell.findNext
, findPrev
and clearSearch
methods to the IgxGridComponent which allow easy search of the grid data, even when the grid is virtualized.IgxTextHighlightDirective
which highlights parts of a DOM element and keeps and updates "active" highlight.All
option to the filter UI select for boolean columnsChangelog
5.3.1
false
condition will return only the real false
values, excluding null
and undefined
. Filtering by Null
will return the null
values and filtering by Empty
will return the undefined
.Filter
button in the filtering UI is replaced with a Close
button that is always active and closes the UI.X
icon that clears the input.Changelog
5.3.0
rowSelectable
property to igxGrid
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.rowSelectable
property and working with grid row, please read the igxGrid
's ReadMe about selection or see the official documentationonContextMenu
output to igxGrid
to emit the clicked cell.igx-datePicker
: Added onClose
event.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.igx-tab-bar
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.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.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.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 ReadMeigxGrid
that allows for vertical remote virtualization. For guidance on how to implement such in your application, please refer to the official documentationigxForOf
directive making the scrolling experience both vertically and horizontally much more natural and similar to a native scroll.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>
dirty
local template variable previously exposed by the igxFor
directive.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.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.igx-ripple
directive through the igxRippleDisabled
property.igx-checkbox
, igx-switch
, and igx-radio
components.indeterminate
property and styling to the igx-checkbox
component.required
property to the igx-checkbox
, igx-radio
, and igx-switch
components.igx-ripple
effect to the igx-checkbox
, igx-switch
, and igx-radio
components. The effect can be disabled through the disableRipple
property.igx-checkbox
, igx-switch
, and igx-radio
components through the labelPosition
property. It can either be before
or after
.igx-checkbox
, igx-switch
, and igx-radio
components via the aria-labelledby property.igx-checkbox
, igx-switch
, and igx-radio
components via the aria-label property.igx-checkbox
and igx-switch
checked state programmatically via toggle
method on the component instance.igx-radio
programmatically via select
method on the component instance.igx-checkbox
and igx-radio
components where the click event was being triggered twice on click.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:
igxInputGroup
componentIgxInputGroupModule
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.EventEmitter
@Output
s. #798 #740EventEmitter
s
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.igxGrid
onSelection
now correctly propagates the original event
in the IGridCellEventArgs
.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.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.utilities
module to the theming engine to allow for easier import of theming functions and mixins, such as igx-color, igx-palette, igx-elevation, etc. To import the utilities do @import '~igniteui-angular/core/styles/themes/utilities';