diff --git a/libs/components/src/tabs/shared/tab-list-item.directive.ts b/libs/components/src/tabs/shared/tab-list-item.directive.ts index 2ddd8ce2c17..815d09038f3 100644 --- a/libs/components/src/tabs/shared/tab-list-item.directive.ts +++ b/libs/components/src/tabs/shared/tab-list-item.directive.ts @@ -12,7 +12,7 @@ import { Directive, ElementRef, HostBinding, Input, input } from "@angular/core" }) export class TabListItemDirective implements FocusableOption { readonly active = input(undefined); - // TODO: Skipped for migration because: + // TODO: Skipped for signal migration because: // This input overrides a field from a superclass, while the superclass field // is not migrated. @Input() disabled: boolean; diff --git a/libs/components/src/tabs/tab-group/tab-body.component.ts b/libs/components/src/tabs/tab-group/tab-body.component.ts index 24a90458ef2..71863de3b3d 100644 --- a/libs/components/src/tabs/tab-group/tab-body.component.ts +++ b/libs/components/src/tabs/tab-group/tab-body.component.ts @@ -1,7 +1,7 @@ // FIXME: Update this file to be type safe and remove this and next line // @ts-strict-ignore import { TemplatePortal, CdkPortalOutlet } from "@angular/cdk/portal"; -import { Component, HostBinding, Input, input } from "@angular/core"; +import { Component, effect, HostBinding, input, signal } from "@angular/core"; @Component({ selector: "bit-tab-body", @@ -9,28 +9,24 @@ import { Component, HostBinding, Input, input } from "@angular/core"; imports: [CdkPortalOutlet], }) export class TabBodyComponent { - private _firstRender: boolean; + private _firstRender = signal(false); readonly content = input(undefined); readonly preserveContent = input(false); @HostBinding("attr.hidden") get hidden() { - return !this.active || null; + return !this.active() || null; } - // TODO: Skipped for migration because: - // Accessor inputs cannot be migrated as they are too complex. - @Input() - get active() { - return this._active; + active = input(); + + constructor() { + effect(() => { + if (!this._firstRender() && this.active()) { + this._firstRender.set(true); + } + }); } - set active(value: boolean) { - this._active = value; - if (this._active) { - this._firstRender = true; - } - } - private _active: boolean; /** * The tab content to render. @@ -39,10 +35,10 @@ export class TabBodyComponent { * then the content persists after the first time content is rendered. */ get tabContent() { - if (this.active) { + if (this.active()) { return this.content(); } - if (this.preserveContent() && this._firstRender) { + if (this.preserveContent() && this._firstRender()) { return this.content(); } return null; diff --git a/libs/components/src/tabs/tab-nav-bar/tab-link.component.ts b/libs/components/src/tabs/tab-nav-bar/tab-link.component.ts index 05cc44269be..55963cba492 100644 --- a/libs/components/src/tabs/tab-nav-bar/tab-link.component.ts +++ b/libs/components/src/tabs/tab-nav-bar/tab-link.component.ts @@ -36,7 +36,7 @@ export class TabLinkComponent implements FocusableOption, AfterViewInit, OnDestr }; readonly route = input(undefined); - // TODO: Skipped for migration because: + // TODO: Skipped for signal migration because: // This input overrides a field from a superclass, while the superclass field // is not migrated. @Input() disabled = false;