7.2.0 Release Candidate 2

• igxCalendar

  • igxCalendar has been refactored to provide the ability to instantiate each view as a separate component.
  • Feature advanced keyboard navigation support has been added. Read up more information in the ReadMe

• New component IgxMonthPicker:

  • Provides the ability to pick a specific month. Read up more information in the ReadMe

• New component IgxHierarchicalGrid:

  • Provides the ability to represent and manipulate hierarchical data in which each level has a different schema. Each level is represented by a component derived from igx-grid and supports most of its functionality. Read up more information about the IgxHierarchicalGrid in the official documentation or the ReadMe

• New component The igxSelect provides an input with dropdown list allowing selection of a single item.

  <igx-select #select1 [placeholder]="'Pick One'">
      <label igxLabel>Sample Label</label>
      <igx-select-item *ngFor="let item of items" [value]="item.field">
          {{ item.field }}
      </igx-select-item>
  </igx-select>

documentation or the ReadMe

• New directive igxAutocomplete - new directive that provides a way to enhance a text input by showing a panel of suggested options, provided by the developer. More information about the IgxAutocomplete is available in the official documentation or the ReadMe.

  <input igxInput type="text" [igxAutocomplete]="townsPanel" />
  <igx-drop-down #townsPanel>
      <igx-drop-down-item *ngFor="let town of towns" [value]="town">
          {{town}}
      </igx-drop-down-item>
  </igx-drop-down>

• igxGrid now has isLoading input property. When enabled will show loading indicator, until the data is available. It can be best utilized for remote scenarios. Another input property loadingGridTemplate allows customizing the loading indicator.

  <!-- Example -->
  <igx-grid [isLoading]="true" ...>
  </igx-grid>

  • Group By
    • The collapse/expand icons have new orientantion to display the action that will be performed when clicked. When an icon points up clicking on it would result in collapsing the related group row and when it points down clicking on it would expand the group row.
    • The collapse/expand all icons have also been updated to reflect the new group row icons better.
    • Group rows now can be expanded/collapsed using Alt + Arrow Up/Down to reflect the new icons.
  • filterMode input added, which determines the filtering ui of the grid. The default value is quickFilter. Other possible value is excelStyle, which mimics the filtering in Excel with added functionality for column moving, sorting, hiding and pinning.
  • IgxColumnComponent now has disablePinning property, which determines wether the column can be pinned from
    the toolbar and whether the column pin will be available in the excel style filter menu. The disableHiding input will be used to show/hide the column hiding functionality in the menu.

• igxTreeGrid

  • The collapse/expand icons have new orientantion to display the action that will be performed when clicked. When an icon points up clicking on it would result in collapsing the related tree grid level and when it points down clicking on it would expand the tree grid level.
  • Expanding/collapsing tree levels can now be performed also by using Alt + Arrow Up/Down to reflect the new icons.

• igxCombo

  • Breaking Change combo.value is now only a getter.
  • Feature added support for templating the default input group of the component. The igx-combo now allows for igx-prefix, igx-suffix,igx-hint and [igxLabel] components to be passed as ng-content and they will be renderer accordingly on the combo's input. Example:

      <!-- customize combo input --->
      <igx-combo #myCombo [data]="myGenres">
          ...
          <label igxLabel>Genres</label>
          <igx-prefix><igx-icon>music_note</igx-icon></igx-prefix>
      </igx-combo>

  • Feature the default combo 'clear' and 'toggle' icons can now be templated. Two new directives are added (with selector [igxComboClearIcon] and [igxComboToggleIcon]). Passing an ng-template with one of the directives will overwrite the default conent of the respective icon. Functionality will remain unaffected. Expample:

      <!-- customize combo input --->
      <igx-combo #myCombo [data]="myGenres">
          ...
          <ng-template igxComboToggleIcon let-collapsed>
              <igx-icon>{{ collapsed ? 'remove_circle' : 'remove_circle_outline'}}</igx-icon>
          </ng-template>
      </igx-combo>

• igxDropDown

  • IgxDropDownItemBase and it's descendants (of which IgxDropDownItem) have had their isSelected and isFocused properties deprecated. Instead, use selected and focused properties.
  • Added an @Input for the index property (such as the one coming from ngFor) of the IgxDropDownItem component. This deprecates the automatic index calculation.

      <igx-drop-down>
          <igx-drop-down-item *ngFor="let item of items; let i = index" [index]="i">
              {{ item.field }}
          </igx-drop-down-item>
      </igx-drop-down>

  • Feature IgxDropDownGroupComponent has been added. It allows for easier grouping of multi-level data, without the need of flattening it. The igx-drop-down-item-group tag accepts igx-drop-down-items and displays them in the appropriate grouped fashion.

        <igx-drop-down>
            <igx-drop-down-item-group *ngFor="let country of contries" [label]="country.name">
                <igx-drop-down-item *ngFor="let city of country.cities" [value]='city.refNo'>
                    {{ city.name }}
                </igx-drop-down-item>
            </igx-drop-down-item-group>
        </igx-drop-down>

• Theme Elevations & Shadows - Components with shadows, set by an elevation level or otherwise, are now fully configurable by the user via schema and/or theme properties. User can also provide a custom elevations set to component themes that support them.

  • Breaking Change - The $search-shadow-color and $search-disabled-shadow-color properties on the igx-input-group-theme have been replaced with $search-resting-shadow and $search-disabled-shadow respectively. Use ng update to migrate automatically.

• IgxTreeGridComponent

  • We can now search in the treegrid's data by using the findNext and the findPrev methods and we can clear the search results with the clearSearch method.

• IgxTextHighlightDirective

  • IgxTextHighlightDirective.page input property is deprecated. rowIndex, columnIndex and page properties of the IActiveHighlightInfo interface are also deprecated. Instead, row and column optional properties are added.

• igxDragDrop

  • dragGhostHost input property added. Sets the element to which the dragged element will be appended. If not provided, the dragged element is appended to the body.

• Column Hiding UI

  • Behavioral Change - The UI now hides the columns whose disableHiding property is set to true instead of simply disabling them.

• igxButton - New Button Style - Include outlined button style to support the latest material spec.

• igxOverlay:

  • igxOverlay.attach() method added. Use this method to obtain an unique Id of the created overlay where the provided component will be shown. Then call igxOverlay.show(id, settings?) method to show the component in overlay. The new attach method has two overloads:
    • attach(element: ElementRef, settings?: OverlaySettings): string - This overload will create overlay where provided element will be shown.
    • attach(component: Type<any>, settings?: OverlaySettings, moduleRef?: NgModuleRef<any>): string - Creates a ComponentRef from the provided component class to show in an overlay. If moduleRef is provided the service will use the module's ComponentFactoryResolver and Injector when creating the ComponentRef instead of the root ones.
  • igxOverlay.show(component, settings) is deprecated. Use igxOverlay.attach() method to obtain an Id, and then call igxOverlay.show(id, settings) method to show a component in the overlay.
  • IPositionStrategy exposes new method clone that clones the strategy instance with its settings.

• igx-date-picker

  • Feature Added dropdown mode to enable the input field value editing and spinning of the date parts as well as displaying a drop down calendar to select a date. Example:

    <igx-date-picker #editableDatePicker1 mode="dropdown" [value]="date" format="dd.MM.y" mask="M/d/y">
    </igx-date-picker>

Components roundness

• Ignite UI for Angular now allows you to change the shape of components by changing their border-radius.

• Here is the list of all components that have roundness functionality:

• igx-badge
• igx-buttongroup
• igx-calendar
• igx-card
• igx-carousel
• igx-chip
• igx-dialog
• igx-drop-down
• igx-expansion-panel
• igx-input-group
• igx-list
  • igx-list-item
• igx-navdrawer
• igx-snackbar
• igx-toast
• igxTooltip

• Breaking Change
• The $button-roundness property on the igx-button-theme have been replaced for each button type with: $flat-border-radius,$raised-border-radius,$outline-border-radius,$fab-border-radius, $icon-border-radius.
• The$roundness property on the igx-chip-theme have been replaced with $border-radius.
• The$roundness property on the iigx-tooltip-theme have been replaced with $border-radius.