feat(ref:no-ref): ng21 v6

Author: igor.nepipenko

CHANGELOG.md

@@ -1,3 +1,9 @@
+# 21.0.0(2026-01-28)
+
+### fix
+
+- Fix ([#1590](https://github.com/JsDaddy/ngx-mask/issues/1590))
+
 # 20.0.3(2025-08-01)
 
 ### fix

projects/ngx-mask-lib/src/lib/ngx-mask.service.ts

@@ -467,10 +467,12 @@ export class NgxMaskService extends NgxMaskApplierService {
         if (!this._renderer || !this._elementRef) {
             return;
         }
-        //[TODO]: andriikamaldinov1 find better solution
-        Promise.resolve().then(() =>
-            this._renderer?.setProperty(this._elementRef?.nativeElement, name, value)
-        );
+        // Use queueMicrotask to defer DOM updates to next microtask.
+        // This prevents ExpressionChangedAfterItHasBeenCheckedError
+        // and ensures proper timing with Angular's change detection.
+        queueMicrotask(() => {
+            this._renderer?.setProperty(this._elementRef?.nativeElement, name, value);
+        });
     }
 
     public checkDropSpecialCharAmount(mask: string): number {

projects/ngx-mask-lib/src/test/show-mask-typed.spec.ts

@@ -230,4 +230,59 @@ describe('Directive: Mask', () => {
         await fixture.whenStable();
         expect(inputTarget.value).equal('+38 123/_____');
     });
+
+    it('should display initial value with showMaskTyped when setValue is used', async () => {
+        component.mask.set('000-000');
+        component.showMaskTyped.set(true);
+        fixture.detectChanges();
+
+        // Set initial value via FormControl
+        component.form.setValue('123456');
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        const debugElement: DebugElement = fixture.debugElement.query(By.css('input'));
+        const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement;
+
+        // The input should show the value with mask, not just the placeholder
+        expect(inputTarget.value).equal('123-456');
+        expect(component.form.value).equal('123456');
+    });
+
+    it('should display initial value with showMaskTyped when setValue is used with number', async () => {
+        component.mask.set('00000');
+        component.showMaskTyped.set(true);
+        fixture.detectChanges();
+
+        // Set initial value as number (like value = 65432)
+        component.form.setValue(65432);
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        const debugElement: DebugElement = fixture.debugElement.query(By.css('input'));
+        const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement;
+
+        // The input should show the value, not just the placeholder mask
+        expect(inputTarget.value).equal('65432');
+        expect(component.form.value).equal(65432);
+    });
+
+    it('should display initial value with showMaskTyped when config provided at application level', async () => {
+        // This simulates the user's scenario where showMaskTyped is provided at app level
+        component.mask.set('(000) 000-0000');
+        component.showMaskTyped.set(true);
+        fixture.detectChanges();
+
+        // Set initial value
+        component.form.setValue('1234567890');
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        const debugElement: DebugElement = fixture.debugElement.query(By.css('input'));
+        const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement;
+
+        // Should show formatted value, not just (___) ___-____
+        expect(inputTarget.value).equal('(123) 456-7890');
+        expect(component.form.value).equal('1234567890');
+    });
 });