fix(kit): BadgedContent: icon is positioned incorrectly when it's sho…

…wn with a delay
taiga-family · Sep 10, 2024 · 4a26b1a · 4a26b1a
1 parent 4853671
commit 4a26b1a
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/projects/kit/components/badged-content/badged-content.component.ts b/projects/kit/components/badged-content/badged-content.component.ts
@@ -1,4 +1,9 @@
-import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    inject,
+} from '@angular/core';
 import {WaResizeObserver} from '@ng-web-apis/resize-observer';
 
 import {TuiBadgedContentDirective} from './badged-content.directive';
@@ -11,4 +16,10 @@ import {TuiBadgedContentDirective} from './badged-content.directive';
     styleUrls: ['./badged-content.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class TuiBadgedContentComponent {}
+export class TuiBadgedContentComponent {
+    private readonly cdr = inject(ChangeDetectorRef);
+
+    public onResize(): void {
+        this.cdr.detectChanges();
+    }
+}
diff --git a/projects/kit/components/badged-content/badged-content.template.html b/projects/kit/components/badged-content/badged-content.template.html
@@ -4,7 +4,7 @@
     #badgeTop
     class="t-badge t-badge_top"
     [style.--t-badge-height.px]="badgeTop.offsetHeight"
-    (waResizeObserver)="(0)"
+    (waResizeObserver)="onResize()"
 >
     <ng-content select="tui-badge-notification[tuiSlot='top']" />
     <div class="t-border">
@@ -16,7 +16,7 @@
     #badgeBottom
     class="t-badge t-badge_bottom"
     [style.--t-badge-height.px]="badgeBottom.offsetHeight"
-    (waResizeObserver)="(0)"
+    (waResizeObserver)="onResize()"
 >
     <ng-content select="tui-badge-notification[tuiSlot='bottom']" />
     <div class="t-border">