update to ng 21

package.json

@@ -18,29 +18,29 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~20.3.16",
-    "@angular/common": "~20.3.16",
-    "@angular/compiler": "~20.3.16",
-    "@angular/core": "~20.3.16",
-    "@angular/forms": "~20.3.16",
-    "@angular/platform-browser": "~20.3.16",
-    "@angular/platform-browser-dynamic": "~20.3.16",
-    "@angular/router": "~20.3.16",
-    "angular-in-memory-web-api": "^0.20.0",
+    "@angular/animations": "~21.1.3",
+    "@angular/common": "~21.1.3",
+    "@angular/compiler": "~21.1.3",
+    "@angular/core": "~21.1.3",
+    "@angular/forms": "~21.1.3",
+    "@angular/platform-browser": "~21.1.3",
+    "@angular/platform-browser-dynamic": "~21.1.3",
+    "@angular/router": "~21.1.3",
+    "angular-in-memory-web-api": "^0.21.0",
     "rxjs": "~6.5.4",
     "tslib": "^2.3.1",
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~20.3.15",
+    "@angular-devkit/build-angular": "~21.1.3",
     "@angular-eslint/builder": "19.3.0",
     "@angular-eslint/eslint-plugin": "19.3.0",
     "@angular-eslint/eslint-plugin-template": "19.3.0",
     "@angular-eslint/schematics": "19.3.0",
     "@angular-eslint/template-parser": "19.3.0",
-    "@angular/cli": "^20.3.15",
-    "@angular/compiler-cli": "~20.3.16",
-    "@angular/language-service": "~20.3.16",
+    "@angular/cli": "^21.1.3",
+    "@angular/compiler-cli": "~21.1.3",
+    "@angular/language-service": "~21.1.3",
     "@types/estree": "^0.0.51",
     "@types/ignite-ui": "^18.1.1",
     "@types/jasmine": "~3.3.8",
@@ -59,7 +59,7 @@
     "karma-coverage": "^2.0.3",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "^2.0.0",
-    "ng-packagr": "~20.3.2",
+    "ng-packagr": "~21.1.0",
     "protractor": "~7.0.0",
     "ts-node": "~7.0.0",
     "typescript": "~5.9.3"

projects/igniteui-angular-wrappers/src/lib/igcombo/igcombo.component.spec.ts

@@ -42,7 +42,7 @@
         it('should be updated correctly if the ngModel value is updated', (done) => {
             fixture.detectChanges();
             fixture.componentInstance.combo.value1 = 1;
-            fixture.detectChanges();
+            fixture.changeDetectorRef.detectChanges();
             setTimeout(() => {
                 expect($('#combo1').igCombo('value')).toBe(1);
                 expect($('#combo1').igCombo('text')).toBe('Chai');
@@ -54,7 +54,7 @@
         it('should be updated correctly if the ngModel value is cleared.', (done) => {
             fixture.detectChanges();
             fixture.componentInstance.combo.value1 = 1;
-            fixture.detectChanges();
+            fixture.changeDetectorRef.detectChanges();
             setTimeout(() => {
                 // clear
                 $('#combo1').parents('ig-combo').find('.ui-igcombo-clearicon').trigger('click');
@@ -130,7 +130,8 @@
 
         it('should be updated correctly if the ngModel value is cleared when multiple selection.', (done) => {
             fixture.detectChanges();
-            fixture.componentInstance.combo.value1 = 1;
+            fixture.componentInstance.viewChild.writeValue([1]);
+            fixture.changeDetectorRef.detectChanges();
             fixture.detectChanges();
             setTimeout(() => {
                 // clear
@@ -149,6 +150,7 @@
                 multiSelection: { enabled: true, showCheckboxes: true }
             };
             fixture.componentInstance.viewChild.dataSource = ['foo', 'bar', 'bas'];
+            fixture.changeDetectorRef.detectChanges();
             fixture.detectChanges();
             const elem = $('#combo1').igCombo('itemsFromIndex', 0)['element'];
             $('#combo1').igCombo('select', elem, {}, true);
@@ -242,7 +244,7 @@
 });
 
 @Component({
     selector: 'test-cmp',
     template: `<div>
                 <ig-combo [(widgetId)]="comboID" [(options)]="options" [(ngModel)]="combo.value1" [dataSource]="northwind"></ig-combo>
               </div>`,
@@ -293,21 +295,21 @@
 }
 
 @Component({
     selector: 'test-cmp',
     template: '<div><ig-combo [(widgetId)]="comboID" [(options)]="options" [(dataSource)]="northwind"></ig-combo></div>',
     standalone: false
 })
 class TestComponentNoNgModelComponent extends TestComponent { }
 
 @Component({
     selector: 'test-cmp',
     template: '<div><ig-combo [(widgetId)]="comboID" [(options)]="optionsMultipleSelection" [(ngModel)]="combo.value1" [(dataSource)]="northwind"></ig-combo></div>',
     standalone: false
 })
 class TestComponentMultipleSelectionComponent extends TestComponent { }
 
 @Component({
     selector: 'test-cmp',
     template: `<div>
       <ig-combo [(widgetId)]="comboID"
                 [(options)]="options"
@@ -320,7 +322,7 @@
 class TestComponentAllowCustomValueComponent extends TestComponent { }
 
 @Component({
     selector: 'test-cmp',
     template: `<div>
       <ig-combo [(widgetId)]="comboID"
                 [valueKey]="\'ProductID\'"
@@ -333,7 +335,7 @@
 class TestComponentEmptyDataComponent extends TestComponent { }
 
 @Component({
     selector: 'test-cmp',
     template: '<div><ig-combo [(widgetId)]="comboID" [(options)]="options2" [(ngModel)]="combo.value1"></ig-combo></div>',
     standalone: false
 })

projects/igniteui-angular-wrappers/src/lib/igdatachart/igdatachart.component.spec.ts

@@ -36,7 +36,8 @@ describe('Infragistics Angular DataChart and Zoombar', () => {
         TestBed.compileComponents().then(() => {
             const fixture = TestBed.createComponent(TestComponent);
             fixture.detectChanges();
-            fixture.componentInstance.opts = fixture.componentInstance.opts1;
+            fixture.componentInstance.viewChild.options = fixture.componentInstance.opts1;
+            fixture.changeDetectorRef.detectChanges();
             fixture.detectChanges();
             expect($(fixture.debugElement.nativeElement).find('#datachart1').igDataChart('option', 'series')[0].type)
                 .toBe('line');
@@ -54,9 +55,10 @@ describe('Infragistics Angular DataChart and Zoombar', () => {
         TestBed.compileComponents().then(() => {
             const fixture = TestBed.createComponent(TestComponent);
             fixture.detectChanges();
-            fixture.componentInstance.data = [
+            fixture.componentInstance.viewChild.dataSource = [
                 { CountryName: 'China', Pop1995: 6768, Pop2005: 7654, Pop2015: 7655, Pop2025: 8655 }
             ];
+            fixture.changeDetectorRef.detectChanges();
             fixture.detectChanges();
             expect($(fixture.debugElement.nativeElement).find('#datachart1').igDataChart('option', 'dataSource')[0].Pop1995)
                 .toBe(6768);
@@ -98,7 +100,7 @@ describe('Infragistics Angular DataChart and Zoombar', () => {
     });
 
     it('Zoombar should destroy correctly', (done) => {
-        const template = '<div><div *ngIf="isChartAreaVisible"><ig-data-chart  widgetId="datachart1" [(options)]="opts"></ig-data-chart><ig-zoombar [(options)]="zoombarOpts" widgetId="zoombar"></ig-zoombar></div></div>';
+        const template = '<div>@if (isChartAreaVisible) {<ig-data-chart  widgetId="datachart1" [(options)]="opts"></ig-data-chart><ig-zoombar [(options)]="zoombarOpts" widgetId="zoombar"></ig-zoombar>}</div>';
         TestBed.overrideComponent(TestComponent, {
             set: {
                 template
@@ -108,7 +110,7 @@ describe('Infragistics Angular DataChart and Zoombar', () => {
             const fixture = TestBed.createComponent(TestComponent);
             fixture.detectChanges();
             fixture.componentInstance.isChartAreaVisible = false;
-            fixture.detectChanges();
+            fixture.changeDetectorRef.detectChanges();
             expect($(fixture.debugElement.nativeElement).find('#datachart1').data('igDataChart')).toBeUndefined();
             expect($(fixture.debugElement.nativeElement).find('#zoombar').data('igZoombar')).toBeUndefined();
             done();

projects/igniteui-angular-wrappers/src/lib/igeditors/igeditors.spec.ts

@@ -1,7 +1,7 @@
 // eslint-disable-next-line max-len
 // modeled after https://github.com/angular/angular/blob/cee2318110eeea115e5f6fc5bfc814cbaa7d90d8/modules/Angular/test/common/directives/ng_for_spec.ts
 import { TestBed } from '@angular/core/testing';
-import { Component, ViewChild, TemplateRef } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import * as Infragistics from '../../public-api';
 
@@ -60,8 +60,9 @@ describe('Infragistics Angular TextEditor', () => {
             const fixture = TestBed.createComponent(TestIgTextEditorComponent);
             fixture.detectChanges();
             setTimeout(() => {
+                const editor = fixture.componentInstance.viewChild;
                 expect($(fixture.debugElement.nativeElement).find('#editor1').igTextEditor('displayValue')).toBe('test_value');
-                fixture.debugElement.componentInstance.val = 'changed_test_value';
+                editor.writeValue('changed_test_value');
                 fixture.detectChanges();
                 setTimeout(() => {
                     expect($(fixture.debugElement.nativeElement).find('#editor1').igTextEditor('displayValue')).toBe('changed_test_value');
@@ -94,8 +95,11 @@ describe('Infragistics Angular TextEditor', () => {
             const fixture = TestBed.createComponent(TestIgTextEditorComponent);
             fixture.detectChanges();
             setTimeout(() => {
-                fixture.debugElement.componentInstance.opts.disabled = false;
-                fixture.detectChanges();
+                const editor = fixture.componentInstance.viewChild;
+                const prevOpts = fixture.componentInstance.opts;
+
+                fixture.componentInstance.viewChild.options = { ...prevOpts, disabled: false };
+                editor.ngDoCheck();
                 setTimeout(() => {
                     expect($(fixture.debugElement.nativeElement).find('#editor1').igTextEditor('option', 'disabled')).toBe(false);
                     expect($(fixture.debugElement.nativeElement).find('#editor1 input.ui-igedit-input')[0].hasAttribute('disabled'))
@@ -181,8 +185,9 @@ describe('Infragistics Angular NumericEditor', () => {
             const fixture = TestBed.createComponent(TestIgNumericEditorComponent);
             fixture.detectChanges();
             setTimeout(() => {
+                const editor = fixture.componentInstance.viewChild;
                 expect($(fixture.debugElement.nativeElement).find('#editor1').igNumericEditor('displayValue')).toBe('42');
-                fixture.debugElement.componentInstance.val = 1;
+                editor.writeValue(1);
                 fixture.detectChanges();
                 setTimeout(() => {
                     expect($(fixture.debugElement.nativeElement).find('#editor1').igNumericEditor('displayValue')).toBe('1');
@@ -235,8 +240,9 @@ describe('Infragistics Angular PercentEditor', () => {
             const fixture = TestBed.createComponent(TestIgPercentEditorComponent);
             fixture.detectChanges();
             setTimeout(() => {
+                const editor = fixture.componentInstance.viewChild;
                 expect($(fixture.debugElement.nativeElement).find('#editor1').igPercentEditor('displayValue')).toBe('40.00%');
-                fixture.debugElement.componentInstance.val = 0.1;
+                editor.writeValue(0.1);
                 fixture.detectChanges();
                 setTimeout(() => {
                     expect($(fixture.debugElement.nativeElement).find('#editor1').igPercentEditor('displayValue')).toBe('10.00%');
@@ -287,8 +293,9 @@ describe('Infragistics Angular MaskEditor', () => {
             const fixture = TestBed.createComponent(TestIgMaskEditorComponent);
             fixture.detectChanges();
             setTimeout(() => {
+                const editor = fixture.componentInstance.viewChild;
                 expect($(fixture.debugElement.nativeElement).find('#editor1').igMaskEditor('displayValue')).toBe('test');
-                fixture.debugElement.componentInstance.val = 'changed';
+                editor.writeValue('changed');
                 fixture.detectChanges();
                 setTimeout(() => {
                     expect($(fixture.debugElement.nativeElement).find('#editor1').igMaskEditor('displayValue')).toBe('changed');
@@ -340,8 +347,9 @@ describe('Infragistics Angular DatePicker', () => {
             const fixture = TestBed.createComponent(TestIgDatePickerComponent);
             fixture.detectChanges();
             setTimeout(() => {
+                const editor = fixture.componentInstance.viewChild;
                 expect($(fixture.debugElement.nativeElement).find('#editor1').igDatePicker('displayValue')).toBe('4/20/2016');
-                fixture.debugElement.componentInstance.val = new Date('3/15/2016');
+                editor.writeValue(new Date('3/15/2016'));
                 fixture.detectChanges();
                 setTimeout(() => {
                     expect($(fixture.debugElement.nativeElement).find('#editor1').igDatePicker('displayValue')).toBe('3/15/2016');
@@ -393,8 +401,9 @@ describe('Infragistics Angular DateEditor', () => {
             const fixture = TestBed.createComponent(TestIgDateEditorComponent);
             fixture.detectChanges();
             setTimeout(() => {
+                const editor = fixture.componentInstance.viewChild;
                 expect($(fixture.debugElement.nativeElement).find('#editor1').igDateEditor('displayValue')).toBe('4/20/2016');
-                fixture.debugElement.componentInstance.val = new Date('3/15/2016');
+                editor.writeValue(new Date('3/15/2016'));
                 fixture.detectChanges();
                 setTimeout(() => {
                     expect($(fixture.debugElement.nativeElement).find('#editor1').igDateEditor('displayValue')).toBe('3/15/2016');
@@ -446,8 +455,9 @@ describe('Infragistics Angular CurrencyEditor', () => {
             const fixture = TestBed.createComponent(TestIgCurrencyEditorComponent);
             fixture.detectChanges();
             setTimeout(() => {
-                expect($(fixture.debugElement.nativeElement).find('#editor1').igCurrencyEditor('displayValue')).toBe('$42.00');
-                fixture.debugElement.componentInstance.val = 1;
+              const editor = fixture.componentInstance.viewChild;
+              expect($(fixture.debugElement.nativeElement).find('#editor1').igCurrencyEditor('displayValue')).toBe('$42.00');
+                editor.writeValue(1);
                 fixture.detectChanges();
                 setTimeout(() => {
                     expect($(fixture.debugElement.nativeElement).find('#editor1').igCurrencyEditor('displayValue')).toBe('$1.00');
@@ -498,8 +508,9 @@ describe('Infragistics Angular CheckboxEditor', () => {
             const fixture = TestBed.createComponent(TestIgCheckboxEditorComponent);
             fixture.detectChanges();
             setTimeout(() => {
+                const editor = fixture.componentInstance.viewChild;
                 expect($(fixture.debugElement.nativeElement).find('#editor1').igCheckboxEditor('value')).toBe(true);
-                fixture.debugElement.componentInstance.val = false;
+                editor.writeValue(false);
                 fixture.detectChanges();
                 setTimeout(() => {
                     expect($(fixture.debugElement.nativeElement).find('#editor1').igCheckboxEditor('value')).toBe(false);
@@ -549,8 +560,9 @@ describe('Infragistics Angular TimePicker', () => {
             const fixture = TestBed.createComponent(TestIgTimePickerComponent);
             fixture.detectChanges();
             setTimeout(() => {
+                const editor = fixture.componentInstance.viewChild;
                 expect($(fixture.debugElement.nativeElement).find('#editor1').igTimePicker('displayValue')).toBe('12:36 AM');
-                fixture.debugElement.componentInstance.val = '05:50 AM';
+                editor.writeValue('05:50 AM');
                 fixture.detectChanges();
                 setTimeout(() => {
                     expect($(fixture.debugElement.nativeElement).find('#editor1').igTimePicker('displayValue')).toBe('5:50 AM');
@@ -573,7 +585,7 @@ describe('Infragistics Angular TimePicker', () => {
     standalone: false
 })
 class TestIgTextEditorComponent {
-    private opts: IgTextEditor;
+    public opts: IgTextEditor;
     private val: string;
     private editorId: string;
     private cdi = 0;