14.1.0

New samples and functionalities based on the Ignite UI Angular upgrade to 14.1.

Release notes
Blog

New Features

• IgxCombo and IgxSimpleComboComponent

  • filterFunction input is added. The new property allows changing of the way filtering is done in the combos. By default filtering is made over the values in combo's data when it is a collection of primitive values, or over the values as defined in displayKey of the combo. If custom filtering function is provided filtering will be done as specified in the provided function.
  • filteringOptions are extended and now contains filterable and filteringKey properties. Setting filterable determines whether combo will be filterable. By default filtering is done over the data value when they are primitive, or over the field of the values equal to displayKey. filteringKey allows to filter data by any data related key.

• igxPivotGrid

  • Add option to template the pivot value chip content:

  <ng-template igxPivotValueChip let-value>
          {{ value.member }}
  </ng-template>
  

  • Add support for usage with igxGridState to persist state of the pivotConfiguration with an additional pivotConfiguration option:

   <igx-pivot-grid
          #grid1
          [igxGridState]="options" ...

      public options : IGridStateOptions = {
      pivotConfiguration: true
  };
  

  One known issue of the igxGridState directive is that it cannot store functions as the state is stored as string.
  As a result any custom functions set to memberFunction, aggregator, formatter, styles etc. will not be stored. Restoring any of these can be achieved with code on application level.
  Hence we have also exposed 2 new events:
  - dimensionInit - emits when a dimension from the configuration is being initialized.
  - valueInit - emits when a value from the configuration is being initialized.
  Which can be used to set back any custom functions you have in the configuration.
  The default aggregator function, like the ones from IgxPivotNumericAggregate, IgxPivotDateAggregate etc., will be restored out of the box. However if you have any custom aggregators (or other custom functions) they need to be set back in the valueInitevent, for example:

      public onValueInit(value: IPivotValue) {
      if (value.member === 'AmountOfSale') {
          value.aggregate.aggregator = IgxTotalSaleAggregate.totalSale;
      }
  }
  

  Same applies to any custom functions on the dimension, like memberFunction. If it is a custom function you can set it back on the dimensionInit event:

   public onDimensionInit(dim: IPivotDimension) {
      if (dim.memberName === 'AllCities') {
          dim.memberFunction = () => 'All';
      }
  }
  

  • igxGridState:
    Exposed a stateParsed event to the state directive that can be used to additionally modify the grid state before it gets applied.

  this.state.stateParsed.subscribe(parsedState => {
          parsedState.sorting.forEach(x => x.strategy = NoopSortingStrategy.instance());
      });
  

• igxGrid

  • Added built-in validation mechanism for Grid Editing. Extends the Angular Form validation functionality
    You can configure it in 2 ways:

    1. Via template-driven configuration on the igx-column of the grid:

       <igx-column required minlength="4" ...>

    2. Via reactive forms using the FormGroup exposed via the formGroupCreated event of the grid:

       <igx-grid (formGroupCreated)='formCreateHandler($event)' ...>

       public formCreateHandler(formGr: FormGroup) {
           // add a validator
           const prodName = formGr.get('UserName');
           prodName.addValidators(forbiddenNameValidator(/bob/i))
       }

    Edited cells will enter an invalid state when validation fails and will show an error icon and message. Cell will remain invalid until the value is edited to a valid value or the related state in the validation service is cleared.

    You can refer to the documentation for more details: https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/validation

  • Added ability to auto-size columns to the size of their cells and header content on initialization by setting width auto:

  <column width='auto' ...>
  

  • Added support for restoring filtering expressions with custom filtering operands for the IgxGridStateDirective.

• Added the IgcFormControl directive that, when imported with its IgcFormsModule, is designed to seamlessly attach to form components from the Ignite UI for WebComponents package and allows using them in Angular templates and reactive forms with support for ngModel and formControlName directives. Currently the only Web Component with support through the directive is igc-rating.