fix(core): Hint fix change detection when changing content programm…

…atically (#9291)
taiga-family · Oct 4, 2024 · 57f80ed · 57f80ed
1 parent 09b6cb7
commit 57f80ed
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 15 deletions.
diff --git a/projects/core/directives/hint/hint-unstyled.component.ts b/projects/core/directives/hint/hint-unstyled.component.ts
@@ -37,6 +37,6 @@ export class TuiHintUnstyled<C> {
         const hint = inject(TuiHintDirective<C>);
 
         hint.component = new PolymorpheusComponent(TuiHintUnstyledComponent);
-        hint.content = inject(TemplateRef<C>);
+        hint.content.set(inject(TemplateRef<C>));
     }
 }
diff --git a/projects/core/directives/hint/hint.component.ts b/projects/core/directives/hint/hint.component.ts
@@ -1,4 +1,4 @@
-import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
+import {ChangeDetectionStrategy, Component, inject, signal} from '@angular/core';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import {EMPTY_CLIENT_RECT} from '@taiga-ui/cdk/constants';
 import {TuiHoveredService} from '@taiga-ui/cdk/directives/hovered';
@@ -15,7 +15,6 @@ import {
 import {TuiPositionService, TuiVisualViewportService} from '@taiga-ui/core/services';
 import {TUI_ANIMATIONS_SPEED, TUI_VIEWPORT} from '@taiga-ui/core/tokens';
 import {tuiIsObscured, tuiToAnimationOptions} from '@taiga-ui/core/utils';
-import type {PolymorpheusContent} from '@taiga-ui/polymorpheus';
 import {injectContext, PolymorpheusOutlet} from '@taiga-ui/polymorpheus';
 import {map, takeWhile} from 'rxjs';
 
@@ -41,7 +40,7 @@ export const TUI_HINT_PROVIDERS = [
     template: `
         <ng-content />
         <span
-            *polymorpheusOutlet="content as text; context: hint.context"
+            *polymorpheusOutlet="content() as text; context: hint.context"
             [innerHTML]="text"
         ></span>
     `,
@@ -69,6 +68,11 @@ export class TuiHintComponent<C = any> {
 
     protected readonly hint = injectContext<TuiContext<TuiHintDirective<C>>>().$implicit;
 
+    protected readonly content =
+        this.hint.component.component === TuiHintUnstyledComponent
+            ? signal('')
+            : this.hint.content;
+
     protected readonly appearance =
         this.hint.appearance ||
         this.hint.el.closest('[tuiTheme]')?.getAttribute('tuiTheme');
@@ -90,12 +94,6 @@ export class TuiHintComponent<C = any> {
             .subscribe((hover) => this.hover.toggle(hover));
     }
 
-    protected get content(): PolymorpheusContent<C> {
-        return this.hint.component.component === TuiHintUnstyledComponent
-            ? ''
-            : this.hint.content;
-    }
-
     protected onClick(target: HTMLElement): void {
         if (
             (!target.closest('tui-hint') && !this.hint.el.contains(target)) ||

diff --git a/projects/core/directives/hint/hint.directive.ts b/projects/core/directives/hint/hint.directive.ts
@@ -1,5 +1,5 @@
 import type {OnDestroy} from '@angular/core';
-import {Directive, inject, INJECTOR, Input} from '@angular/core';
+import {Directive, inject, INJECTOR, Input, signal} from '@angular/core';
 import {TuiActiveZone} from '@taiga-ui/cdk/directives/active-zone';
 import {tuiInjectElement} from '@taiga-ui/cdk/utils/dom';
 import type {TuiRectAccessor, TuiVehicle} from '@taiga-ui/core/classes';
@@ -50,15 +50,15 @@ export class TuiHintDirective<C>
     @Input('tuiHintAppearance')
     public appearance = inject(TUI_HINT_OPTIONS).appearance;
 
-    public content: PolymorpheusContent<C>;
+    public content = signal<PolymorpheusContent<C>>(null);
     public component = inject(PolymorpheusComponent<unknown>);
     public readonly el = tuiInjectElement();
     public readonly activeZone? = inject(TuiActiveZone, {optional: true});
     public readonly type = 'hint';
 
     @Input()
     public set tuiHint(content: PolymorpheusContent<C>) {
-        this.content = content;
+        this.content.set(content);
 
         if (!content) {
             this.toggle(false);
@@ -74,7 +74,7 @@ export class TuiHintDirective<C>
     }
 
     public toggle(show: boolean): void {
-        if (show && this.content) {
+        if (show && this.content()) {
             this.service.add(this);
         } else {
             this.service.remove(this);

diff --git a/projects/kit/components/line-clamp/line-clamp-box.component.ts b/projects/kit/components/line-clamp/line-clamp-box.component.ts
@@ -7,7 +7,7 @@ import {PolymorpheusOutlet, PolymorpheusTemplate} from '@taiga-ui/polymorpheus';
     standalone: true,
     imports: [PolymorpheusOutlet, PolymorpheusTemplate],
     template: `
-        <ng-container *polymorpheusOutlet="content as text">{{ text }}</ng-container>
+        <ng-container *polymorpheusOutlet="content() as text">{{ text }}</ng-container>
     `,
     styleUrls: ['./line-clamp-box.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,