{{ subtitle }}
@@ -44,12 +44,12 @@
- @if (loading) {
+ @if (loading()) {
@@ -59,8 +59,8 @@
[ngClass]="{
'tw-p-4': !disablePadding && !isDrawer,
'tw-px-6 tw-py-4': !disablePadding && isDrawer,
- 'tw-overflow-y-auto': !loading,
- 'tw-invisible tw-overflow-y-hidden': loading,
+ 'tw-overflow-y-auto': !loading(),
+ 'tw-invisible tw-overflow-y-hidden': loading(),
}"
>
diff --git a/libs/components/src/dialog/dialog/dialog.component.ts b/libs/components/src/dialog/dialog/dialog.component.ts
index f3daa218cdb..2036caa3791 100644
--- a/libs/components/src/dialog/dialog/dialog.component.ts
+++ b/libs/components/src/dialog/dialog/dialog.component.ts
@@ -4,7 +4,7 @@ import { CdkTrapFocus } from "@angular/cdk/a11y";
import { coerceBooleanProperty } from "@angular/cdk/coercion";
import { CdkScrollable } from "@angular/cdk/scrolling";
import { CommonModule } from "@angular/common";
-import { Component, HostBinding, Input, inject, viewChild } from "@angular/core";
+import { Component, HostBinding, Input, inject, viewChild, input } from "@angular/core";
import { I18nPipe } from "@bitwarden/ui-common";
@@ -40,28 +40,32 @@ export class DialogComponent {
protected bodyHasScrolledFrom = hasScrolledFrom(this.scrollableBody);
/** Background color */
- @Input()
- background: "default" | "alt" = "default";
+ readonly background = input<"default" | "alt">("default");
/**
* Dialog size, more complex dialogs should use large, otherwise default is fine.
*/
- @Input() dialogSize: "small" | "default" | "large" = "default";
+ readonly dialogSize = input<"small" | "default" | "large">("default");
/**
* Title to show in the dialog's header
*/
- @Input() title: string;
+ readonly title = input
(undefined);
/**
* Subtitle to show in the dialog's header
*/
+ // TODO: Skipped for migration because:
+ // This input is used in a control flow expression (e.g. `@if` or `*ngIf`)
+ // and migrating would break narrowing currently.
@Input() subtitle: string;
private _disablePadding = false;
/**
* Disable the built-in padding on the dialog, for use with tabbed dialogs.
*/
+ // TODO: Skipped for migration because:
+ // Accessor inputs cannot be migrated as they are too complex.
@Input() set disablePadding(value: boolean | "") {
this._disablePadding = coerceBooleanProperty(value);
}
@@ -72,7 +76,7 @@ export class DialogComponent {
/**
* Mark the dialog as loading which replaces the content with a spinner.
*/
- @Input() loading = false;
+ readonly loading = input(false);
@HostBinding("class") get classes() {
// `tw-max-h-[90vh]` is needed to prevent dialogs from overlapping the desktop header
@@ -92,7 +96,7 @@ export class DialogComponent {
}
get width() {
- switch (this.dialogSize) {
+ switch (this.dialogSize()) {
case "small": {
return "md:tw-max-w-sm";
}
diff --git a/libs/components/src/dialog/directives/dialog-close.directive.ts b/libs/components/src/dialog/directives/dialog-close.directive.ts
index 5e44ced7c21..66d1a996295 100644
--- a/libs/components/src/dialog/directives/dialog-close.directive.ts
+++ b/libs/components/src/dialog/directives/dialog-close.directive.ts
@@ -1,11 +1,11 @@
import { DialogRef } from "@angular/cdk/dialog";
-import { Directive, HostBinding, HostListener, Input, Optional } from "@angular/core";
+import { Directive, HostBinding, HostListener, Optional, input } from "@angular/core";
@Directive({
selector: "[bitDialogClose]",
})
export class DialogCloseDirective {
- @Input("bitDialogClose") dialogResult: any;
+ readonly dialogResult = input(undefined, { alias: "bitDialogClose" });
constructor(@Optional() public dialogRef: DialogRef) {}
@@ -20,6 +20,6 @@ export class DialogCloseDirective {
return;
}
- this.dialogRef.close(this.dialogResult);
+ this.dialogRef.close(this.dialogResult());
}
}
diff --git a/libs/components/src/dialog/directives/dialog-title-container.directive.ts b/libs/components/src/dialog/directives/dialog-title-container.directive.ts
index e17487f2780..683bda41cad 100644
--- a/libs/components/src/dialog/directives/dialog-title-container.directive.ts
+++ b/libs/components/src/dialog/directives/dialog-title-container.directive.ts
@@ -1,5 +1,5 @@
import { CdkDialogContainer, DialogRef } from "@angular/cdk/dialog";
-import { Directive, HostBinding, Input, OnInit, Optional } from "@angular/core";
+import { Directive, HostBinding, OnInit, Optional, input } from "@angular/core";
// Increments for each instance of this component
let nextId = 0;
@@ -10,7 +10,7 @@ let nextId = 0;
export class DialogTitleContainerDirective implements OnInit {
@HostBinding("id") id = `bit-dialog-title-${nextId++}`;
- @Input() simple = false;
+ readonly simple = input(false);
constructor(@Optional() private dialogRef: DialogRef) {}
diff --git a/libs/components/src/disclosure/disclosure-trigger-for.directive.ts b/libs/components/src/disclosure/disclosure-trigger-for.directive.ts
index bf7bdb409ec..9524d518df7 100644
--- a/libs/components/src/disclosure/disclosure-trigger-for.directive.ts
+++ b/libs/components/src/disclosure/disclosure-trigger-for.directive.ts
@@ -1,6 +1,6 @@
// FIXME: Update this file to be type safe and remove this and next line
// @ts-strict-ignore
-import { Directive, HostBinding, HostListener, Input } from "@angular/core";
+import { Directive, HostBinding, HostListener, input } from "@angular/core";
import { DisclosureComponent } from "./disclosure.component";
@@ -12,17 +12,17 @@ export class DisclosureTriggerForDirective {
/**
* Accepts template reference for a bit-disclosure component instance
*/
- @Input("bitDisclosureTriggerFor") disclosure: DisclosureComponent;
+ readonly disclosure = input(undefined, { alias: "bitDisclosureTriggerFor" });
@HostBinding("attr.aria-expanded") get ariaExpanded() {
- return this.disclosure.open;
+ return this.disclosure().open;
}
@HostBinding("attr.aria-controls") get ariaControls() {
- return this.disclosure.id;
+ return this.disclosure().id;
}
@HostListener("click") click() {
- this.disclosure.open = !this.disclosure.open;
+ this.disclosure().open = !this.disclosure().open;
}
}
diff --git a/libs/components/src/disclosure/disclosure.component.ts b/libs/components/src/disclosure/disclosure.component.ts
index 58e425e9206..cc316711aae 100644
--- a/libs/components/src/disclosure/disclosure.component.ts
+++ b/libs/components/src/disclosure/disclosure.component.ts
@@ -48,6 +48,8 @@ export class DisclosureComponent {
/**
* Optionally init the disclosure in its opened state
*/
+ // TODO: Skipped for migration because:
+ // Accessor inputs cannot be migrated as they are too complex.
@Input({ transform: booleanAttribute }) set open(isOpen: boolean) {
this._open = isOpen;
this.openChange.emit(isOpen);
diff --git a/libs/components/src/form-control/form-control.component.ts b/libs/components/src/form-control/form-control.component.ts
index 0e2fa393f80..6db945f5458 100644
--- a/libs/components/src/form-control/form-control.component.ts
+++ b/libs/components/src/form-control/form-control.component.ts
@@ -2,7 +2,7 @@
// @ts-strict-ignore
import { coerceBooleanProperty } from "@angular/cdk/coercion";
import { NgClass } from "@angular/common";
-import { Component, ContentChild, HostBinding, Input } from "@angular/core";
+import { Component, ContentChild, HostBinding, Input, input } from "@angular/core";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { I18nPipe } from "@bitwarden/ui-common";
@@ -17,9 +17,11 @@ import { BitFormControlAbstraction } from "./form-control.abstraction";
imports: [NgClass, TypographyDirective, I18nPipe],
})
export class FormControlComponent {
- @Input() label: string;
+ readonly label = input(undefined);
private _inline = false;
+ // TODO: Skipped for migration because:
+ // Accessor inputs cannot be migrated as they are too complex.
@Input() get inline() {
return this._inline;
}
@@ -28,6 +30,8 @@ export class FormControlComponent {
}
private _disableMargin = false;
+ // TODO: Skipped for migration because:
+ // Accessor inputs cannot be migrated as they are too complex.
@Input() set disableMargin(value: boolean | "") {
this._disableMargin = coerceBooleanProperty(value);
}
diff --git a/libs/components/src/form-control/label.component.ts b/libs/components/src/form-control/label.component.ts
index d5028715bd5..161c3bdcecb 100644
--- a/libs/components/src/form-control/label.component.ts
+++ b/libs/components/src/form-control/label.component.ts
@@ -19,6 +19,8 @@ export class BitLabel {
@Optional() private parentFormControl: FormControlComponent,
) {}
+ // TODO: Skipped for migration because:
+ // Accessor inputs cannot be migrated as they are too complex.
@HostBinding("class") @Input() get classList() {
return ["tw-inline-flex", "tw-gap-1", "tw-items-baseline", "tw-flex-row", "tw-min-w-0"];
}
@@ -27,6 +29,9 @@ export class BitLabel {
return this.elementRef.nativeElement.textContent.trim();
}
+ // TODO: Skipped for migration because:
+ // This input is used in combination with `@HostBinding` and migrating would
+ // break.
@HostBinding() @Input() id = `bit-label-${nextId++}`;
get isInsideFormControl() {
diff --git a/libs/components/src/form-field/error-summary.component.ts b/libs/components/src/form-field/error-summary.component.ts
index c57819a1fca..9750f9ee556 100644
--- a/libs/components/src/form-field/error-summary.component.ts
+++ b/libs/components/src/form-field/error-summary.component.ts
@@ -1,7 +1,7 @@
// FIXME: Update this file to be type safe and remove this and next line
// @ts-strict-ignore
-import { Component, Input } from "@angular/core";
+import { Component, input } from "@angular/core";
import { AbstractControl, UntypedFormGroup } from "@angular/forms";
import { I18nPipe } from "@bitwarden/ui-common";
@@ -18,11 +18,10 @@ import { I18nPipe } from "@bitwarden/ui-common";
imports: [I18nPipe],
})
export class BitErrorSummary {
- @Input()
- formGroup: UntypedFormGroup;
+ readonly formGroup = input(undefined);
get errorCount(): number {
- return this.getErrorCount(this.formGroup);
+ return this.getErrorCount(this.formGroup());
}
get errorString() {
diff --git a/libs/components/src/form-field/error.component.ts b/libs/components/src/form-field/error.component.ts
index a0f7906b366..8e8101b8709 100644
--- a/libs/components/src/form-field/error.component.ts
+++ b/libs/components/src/form-field/error.component.ts
@@ -1,6 +1,6 @@
// FIXME: Update this file to be type safe and remove this and next line
// @ts-strict-ignore
-import { Component, HostBinding, Input } from "@angular/core";
+import { Component, HostBinding, input } from "@angular/core";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
@@ -18,37 +18,38 @@ let nextId = 0;
export class BitErrorComponent {
@HostBinding() id = `bit-error-${nextId++}`;
- @Input() error: [string, any];
+ readonly error = input<[string, any]>(undefined);
constructor(private i18nService: I18nService) {}
get displayError() {
- switch (this.error[0]) {
+ const error = this.error();
+ switch (error[0]) {
case "required":
return this.i18nService.t("inputRequired");
case "email":
return this.i18nService.t("inputEmail");
case "minlength":
- return this.i18nService.t("inputMinLength", this.error[1]?.requiredLength);
+ return this.i18nService.t("inputMinLength", error[1]?.requiredLength);
case "maxlength":
- return this.i18nService.t("inputMaxLength", this.error[1]?.requiredLength);
+ return this.i18nService.t("inputMaxLength", error[1]?.requiredLength);
case "min":
- return this.i18nService.t("inputMinValue", this.error[1]?.min);
+ return this.i18nService.t("inputMinValue", error[1]?.min);
case "max":
- return this.i18nService.t("inputMaxValue", this.error[1]?.max);
+ return this.i18nService.t("inputMaxValue", error[1]?.max);
case "forbiddenCharacters":
- return this.i18nService.t("inputForbiddenCharacters", this.error[1]?.characters.join(", "));
+ return this.i18nService.t("inputForbiddenCharacters", error[1]?.characters.join(", "));
case "multipleEmails":
return this.i18nService.t("multipleInputEmails");
case "trim":
return this.i18nService.t("inputTrimValidator");
default:
// Attempt to show a custom error message.
- if (this.error[1]?.message) {
- return this.error[1]?.message;
+ if (error[1]?.message) {
+ return error[1]?.message;
}
- return this.error;
+ return error;
}
}
}
diff --git a/libs/components/src/form-field/form-field.component.ts b/libs/components/src/form-field/form-field.component.ts
index 954297a8aa4..cf50ad2f5e1 100644
--- a/libs/components/src/form-field/form-field.component.ts
+++ b/libs/components/src/form-field/form-field.component.ts
@@ -12,6 +12,7 @@ import {
Input,
ViewChild,
signal,
+ input,
} from "@angular/core";
import { I18nPipe } from "@bitwarden/ui-common";
@@ -38,10 +39,11 @@ export class BitFormFieldComponent implements AfterContentChecked {
@ViewChild(BitErrorComponent) error: BitErrorComponent;
- @Input({ transform: booleanAttribute })
- disableMargin = false;
+ readonly disableMargin = input(false, { transform: booleanAttribute });
/** If `true`, remove the bottom border for `readonly` inputs */
+ // TODO: Skipped for migration because:
+ // Your application code writes to the input. This prevents migration.
@Input({ transform: booleanAttribute })
disableReadOnlyBorder = false;
@@ -76,7 +78,7 @@ export class BitFormFieldComponent implements AfterContentChecked {
@HostBinding("class")
get classList() {
return ["tw-block"]
- .concat(this.disableMargin ? [] : ["tw-mb-4", "bit-compact:tw-mb-3"])
+ .concat(this.disableMargin() ? [] : ["tw-mb-4", "bit-compact:tw-mb-3"])
.concat(this.readOnly ? [] : "tw-pt-2");
}
diff --git a/libs/components/src/form-field/password-input-toggle.directive.ts b/libs/components/src/form-field/password-input-toggle.directive.ts
index a696a88c468..dfe6e10777f 100644
--- a/libs/components/src/form-field/password-input-toggle.directive.ts
+++ b/libs/components/src/form-field/password-input-toggle.directive.ts
@@ -23,6 +23,8 @@ export class BitPasswordInputToggleDirective implements AfterContentInit, OnChan
/**
* Whether the input is toggled to show the password.
*/
+ // TODO: Skipped for migration because:
+ // Your application code writes to the input. This prevents migration.
@HostBinding("attr.aria-pressed") @Input() toggled = false;
@Output() toggledChange = new EventEmitter();
diff --git a/libs/components/src/form-field/prefix.directive.ts b/libs/components/src/form-field/prefix.directive.ts
index 34fcbf85233..e468572561a 100644
--- a/libs/components/src/form-field/prefix.directive.ts
+++ b/libs/components/src/form-field/prefix.directive.ts
@@ -6,6 +6,8 @@ import { BitIconButtonComponent } from "../icon-button/icon-button.component";
selector: "[bitPrefix]",
})
export class BitPrefixDirective implements OnInit {
+ // TODO: Skipped for migration because:
+ // Accessor inputs cannot be migrated as they are too complex.
@HostBinding("class") @Input() get classList() {
return ["tw-text-muted"];
}
diff --git a/libs/components/src/form-field/suffix.directive.ts b/libs/components/src/form-field/suffix.directive.ts
index 28736ce78a9..6c09c7580ae 100644
--- a/libs/components/src/form-field/suffix.directive.ts
+++ b/libs/components/src/form-field/suffix.directive.ts
@@ -6,6 +6,8 @@ import { BitIconButtonComponent } from "../icon-button/icon-button.component";
selector: "[bitSuffix]",
})
export class BitSuffixDirective implements OnInit {
+ // TODO: Skipped for migration because:
+ // Accessor inputs cannot be migrated as they are too complex.
@HostBinding("class") @Input() get classList() {
return ["tw-text-muted"];
}
diff --git a/libs/components/src/icon-button/icon-button.component.ts b/libs/components/src/icon-button/icon-button.component.ts
index 70331b84db8..ae4c53a37f3 100644
--- a/libs/components/src/icon-button/icon-button.component.ts
+++ b/libs/components/src/icon-button/icon-button.component.ts
@@ -1,7 +1,7 @@
// FIXME: Update this file to be type safe and remove this and next line
// @ts-strict-ignore
import { NgClass } from "@angular/common";
-import { Component, computed, ElementRef, HostBinding, Input, model } from "@angular/core";
+import { Component, computed, ElementRef, HostBinding, Input, model, input } from "@angular/core";
import { toObservable, toSignal } from "@angular/core/rxjs-interop";
import { debounce, interval } from "rxjs";
@@ -167,10 +167,14 @@ const sizes: Record = {
},
})
export class BitIconButtonComponent implements ButtonLikeAbstraction, FocusableElement {
+ // TODO: Skipped for migration because:
+ // Your application code writes to the input. This prevents migration.
@Input("bitIconButton") icon: string;
- @Input() buttonType: IconButtonType = "main";
+ readonly buttonType = input("main");
+ // TODO: Skipped for migration because:
+ // Your application code writes to the input. This prevents migration.
@Input() size: IconButtonSize = "default";
@HostBinding("class") get classList() {
@@ -183,9 +187,11 @@ export class BitIconButtonComponent implements ButtonLikeAbstraction, FocusableE
"hover:tw-no-underline",
"focus:tw-outline-none",
]
- .concat(styles[this.buttonType])
+ .concat(styles[this.buttonType()])
.concat(sizes[this.size])
- .concat(this.showDisabledStyles() || this.disabled() ? disabledStyles[this.buttonType] : []);
+ .concat(
+ this.showDisabledStyles() || this.disabled() ? disabledStyles[this.buttonType()] : [],
+ );
}
get iconClass() {
diff --git a/libs/components/src/icon/icon.component.ts b/libs/components/src/icon/icon.component.ts
index 5eae2c1d501..cad4fab6865 100644
--- a/libs/components/src/icon/icon.component.ts
+++ b/libs/components/src/icon/icon.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from "@angular/core";
+import { Component, Input, input } from "@angular/core";
import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
import { Icon, isIcon } from "./icon";
@@ -6,8 +6,8 @@ import { Icon, isIcon } from "./icon";
@Component({
selector: "bit-icon",
host: {
- "[attr.aria-hidden]": "!ariaLabel",
- "[attr.aria-label]": "ariaLabel",
+ "[attr.aria-hidden]": "!ariaLabel()",
+ "[attr.aria-label]": "ariaLabel()",
"[innerHtml]": "innerHtml",
},
template: ``,
@@ -15,6 +15,8 @@ import { Icon, isIcon } from "./icon";
export class BitIconComponent {
innerHtml: SafeHtml | null = null;
+ // TODO: Skipped for migration because:
+ // Accessor inputs cannot be migrated as they are too complex.
@Input() set icon(icon: Icon) {
if (!isIcon(icon)) {
return;
@@ -24,7 +26,7 @@ export class BitIconComponent {
this.innerHtml = this.domSanitizer.bypassSecurityTrustHtml(svg);
}
- @Input() ariaLabel: string | undefined = undefined;
+ readonly ariaLabel = input(undefined);
constructor(private domSanitizer: DomSanitizer) {}
}
diff --git a/libs/components/src/input/autofocus.directive.ts b/libs/components/src/input/autofocus.directive.ts
index 46eb1b15b16..d85350bc22d 100644
--- a/libs/components/src/input/autofocus.directive.ts
+++ b/libs/components/src/input/autofocus.directive.ts
@@ -21,6 +21,8 @@ import { FocusableElement } from "../shared/focusable-element";
selector: "[appAutofocus], [bitAutofocus]",
})
export class AutofocusDirective implements AfterContentChecked {
+ // TODO: Skipped for migration because:
+ // Accessor inputs cannot be migrated as they are too complex.
@Input() set appAutofocus(condition: boolean | string) {
this.autofocus = condition === "" || condition === true;
}
diff --git a/libs/components/src/input/input.directive.ts b/libs/components/src/input/input.directive.ts
index 4a6a03295d4..53f0ca542eb 100644
--- a/libs/components/src/input/input.directive.ts
+++ b/libs/components/src/input/input.directive.ts
@@ -9,6 +9,7 @@ import {
NgZone,
Optional,
Self,
+ input,
} from "@angular/core";
import { NgControl, Validators } from "@angular/forms";
@@ -32,6 +33,8 @@ export function inputBorderClasses(error: boolean) {
providers: [{ provide: BitFormFieldControl, useExisting: BitInputDirective }],
})
export class BitInputDirective implements BitFormFieldControl {
+ // TODO: Skipped for migration because:
+ // Accessor inputs cannot be migrated as they are too complex.
@HostBinding("class") @Input() get classList() {
const classes = [
"tw-block",
@@ -52,6 +55,9 @@ export class BitInputDirective implements BitFormFieldControl {
return classes.filter((s) => s != "");
}
+ // TODO: Skipped for migration because:
+ // This input is used in combination with `@HostBinding` and migrating would
+ // break.
@HostBinding() @Input() id = `bit-input-${nextId++}`;
@HostBinding("attr.aria-describedby") ariaDescribedBy: string;
@@ -60,10 +66,18 @@ export class BitInputDirective implements BitFormFieldControl {
return this.hasError ? true : undefined;
}
+ // TODO: Skipped for migration because:
+ // This input is used in combination with `@HostBinding` and migrating would
+ // break.
@HostBinding("attr.type") @Input() type?: InputTypes;
+ // TODO: Skipped for migration because:
+ // This input is used in combination with `@HostBinding` and migrating would
+ // break.
@HostBinding("attr.spellcheck") @Input() spellcheck?: boolean;
+ // TODO: Skipped for migration because:
+ // Accessor inputs cannot be migrated as they are too complex.
@HostBinding()
@Input()
get required() {
@@ -74,10 +88,10 @@ export class BitInputDirective implements BitFormFieldControl {
}
private _required: boolean;
- @Input() hasPrefix = false;
- @Input() hasSuffix = false;
+ readonly hasPrefix = input(false);
+ readonly hasSuffix = input(false);
- @Input() showErrorsWhenDisabled? = false;
+ readonly showErrorsWhenDisabled = input(false);
get labelForId(): string {
return this.id;
@@ -89,7 +103,7 @@ export class BitInputDirective implements BitFormFieldControl {
}
get hasError() {
- if (this.showErrorsWhenDisabled) {
+ if (this.showErrorsWhenDisabled()) {
return (
(this.ngControl?.status === "INVALID" || this.ngControl?.status === "DISABLED") &&
this.ngControl?.touched &&
diff --git a/libs/components/src/item/item-content.component.html b/libs/components/src/item/item-content.component.html
index 4010970dc9e..844f7dd6975 100644
--- a/libs/components/src/item/item-content.component.html
+++ b/libs/components/src/item/item-content.component.html
@@ -8,8 +8,8 @@
>
@@ -22,8 +22,8 @@
bitTypography="helper"
class="tw-text-muted tw-w-full"
[ngClass]="{
- 'tw-truncate': truncate,
- 'tw-text-wrap tw-overflow-auto tw-break-words': !truncate,
+ 'tw-truncate': truncate(),
+ 'tw-text-wrap tw-overflow-auto tw-break-words': !truncate(),
}"
>
diff --git a/libs/components/src/item/item-content.component.ts b/libs/components/src/item/item-content.component.ts
index 0f828de33b4..f75713b139e 100644
--- a/libs/components/src/item/item-content.component.ts
+++ b/libs/components/src/item/item-content.component.ts
@@ -7,9 +7,9 @@ import {
ChangeDetectionStrategy,
Component,
ElementRef,
- Input,
signal,
ViewChild,
+ input,
} from "@angular/core";
import { TypographyModule } from "../typography";
@@ -39,7 +39,7 @@ export class ItemContentComponent implements AfterContentChecked {
*
* Default behavior is truncation.
*/
- @Input() truncate = true;
+ readonly truncate = input(true);
ngAfterContentChecked(): void {
this.endSlotHasChildren.set(this.endSlot?.nativeElement.childElementCount > 0);
diff --git a/libs/components/src/link/link.directive.ts b/libs/components/src/link/link.directive.ts
index ad9c94b7831..83e386fb905 100644
--- a/libs/components/src/link/link.directive.ts
+++ b/libs/components/src/link/link.directive.ts
@@ -1,4 +1,4 @@
-import { Input, HostBinding, Directive } from "@angular/core";
+import { HostBinding, Directive, input } from "@angular/core";
export type LinkType = "primary" | "secondary" | "contrast" | "light";
@@ -62,8 +62,7 @@ const commonStyles = [
@Directive()
abstract class LinkDirective {
- @Input()
- linkType: LinkType = "primary";
+ readonly linkType = input
("primary");
}
/**
@@ -81,7 +80,7 @@ export class AnchorLinkDirective extends LinkDirective {
@HostBinding("class") get classList() {
return ["before:-tw-inset-y-[0.125rem]"]
.concat(commonStyles)
- .concat(linkStyles[this.linkType] ?? []);
+ .concat(linkStyles[this.linkType()] ?? []);
}
}
@@ -92,6 +91,6 @@ export class ButtonLinkDirective extends LinkDirective {
@HostBinding("class") get classList() {
return ["before:-tw-inset-y-[0.25rem]"]
.concat(commonStyles)
- .concat(linkStyles[this.linkType] ?? []);
+ .concat(linkStyles[this.linkType()] ?? []);
}
}
diff --git a/libs/components/src/menu/menu-item.directive.ts b/libs/components/src/menu/menu-item.directive.ts
index b52bbed2d50..763660e718f 100644
--- a/libs/components/src/menu/menu-item.directive.ts
+++ b/libs/components/src/menu/menu-item.directive.ts
@@ -39,6 +39,8 @@ export class MenuItemDirective implements FocusableOption {
return this.disabled || null; // native disabled attr must be null when false
}
+ // TODO: Skipped for migration because:
+ // Your application code writes to the input. This prevents migration.
@Input({ transform: coerceBooleanProperty }) disabled?: boolean = false;
constructor(public elementRef: ElementRef) {}
diff --git a/libs/components/src/menu/menu-trigger-for.directive.ts b/libs/components/src/menu/menu-trigger-for.directive.ts
index 528697600c4..c80438c5052 100644
--- a/libs/components/src/menu/menu-trigger-for.directive.ts
+++ b/libs/components/src/menu/menu-trigger-for.directive.ts
@@ -11,6 +11,7 @@ import {
Input,
OnDestroy,
ViewContainerRef,
+ input,
} from "@angular/core";
import { Observable, Subscription } from "rxjs";
import { filter, mergeWith } from "rxjs/operators";
@@ -21,13 +22,16 @@ import { MenuComponent } from "./menu.component";
export class MenuTriggerForDirective implements OnDestroy {
@HostBinding("attr.aria-expanded") isOpen = false;
@HostBinding("attr.aria-haspopup") get hasPopup(): "menu" | "dialog" {
- return this.menu?.ariaRole || "menu";
+ return this.menu()?.ariaRole() || "menu";
}
+ // TODO: Skipped for migration because:
+ // This input is used in combination with `@HostBinding` and migrating would
+ // break.
@HostBinding("attr.role")
@Input()
role = "button";
- @Input("bitMenuTriggerFor") menu: MenuComponent;
+ readonly menu = input(undefined, { alias: "bitMenuTriggerFor" });
private overlayRef: OverlayRef;
private defaultMenuConfig: OverlayConfig = {
@@ -66,14 +70,15 @@ export class MenuTriggerForDirective implements OnDestroy {
}
private openMenu() {
- if (this.menu == null) {
+ const menu = this.menu();
+ if (menu == null) {
throw new Error("Cannot find bit-menu element");
}
this.isOpen = true;
this.overlayRef = this.overlay.create(this.defaultMenuConfig);
- const templatePortal = new TemplatePortal(this.menu.templateRef, this.viewContainerRef);
+ const templatePortal = new TemplatePortal(menu.templateRef, this.viewContainerRef);
this.overlayRef.attach(templatePortal);
this.closedEventsSub = this.getClosedEvents().subscribe((event: KeyboardEvent | undefined) => {
@@ -90,11 +95,11 @@ export class MenuTriggerForDirective implements OnDestroy {
}
this.destroyMenu();
});
- if (this.menu.keyManager) {
- this.menu.keyManager.setFirstItemActive();
+ if (menu.keyManager) {
+ menu.keyManager.setFirstItemActive();
this.keyDownEventsSub = this.overlayRef
.keydownEvents()
- .subscribe((event: KeyboardEvent) => this.menu.keyManager.onKeydown(event));
+ .subscribe((event: KeyboardEvent) => this.menu().keyManager.onKeydown(event));
}
}
@@ -105,19 +110,19 @@ export class MenuTriggerForDirective implements OnDestroy {
this.isOpen = false;
this.disposeAll();
- this.menu.closed.emit();
+ this.menu().closed.emit();
}
private getClosedEvents(): Observable {
const detachments = this.overlayRef.detachments();
const escKey = this.overlayRef.keydownEvents().pipe(
filter((event: KeyboardEvent) => {
- const keys = this.menu.ariaRole === "menu" ? ["Escape", "Tab"] : ["Escape"];
+ const keys = this.menu().ariaRole() === "menu" ? ["Escape", "Tab"] : ["Escape"];
return keys.includes(event.key);
}),
);
const backdrop = this.overlayRef.backdropClick();
- const menuClosed = this.menu.closed;
+ const menuClosed = this.menu().closed;
return detachments.pipe(mergeWith(escKey, backdrop, menuClosed));
}
diff --git a/libs/components/src/menu/menu.component.html b/libs/components/src/menu/menu.component.html
index 31fd6df0a66..f5c60660775 100644
--- a/libs/components/src/menu/menu.component.html
+++ b/libs/components/src/menu/menu.component.html
@@ -2,10 +2,10 @@
diff --git a/libs/components/src/menu/menu.component.ts b/libs/components/src/menu/menu.component.ts
index 8636f158729..238052201f0 100644
--- a/libs/components/src/menu/menu.component.ts
+++ b/libs/components/src/menu/menu.component.ts
@@ -10,7 +10,7 @@ import {
ContentChildren,
QueryList,
AfterContentInit,
- Input,
+ input,
} from "@angular/core";
import { MenuItemDirective } from "./menu-item.directive";
@@ -28,12 +28,12 @@ export class MenuComponent implements AfterContentInit {
menuItems: QueryList;
keyManager?: FocusKeyManager;
- @Input() ariaRole: "menu" | "dialog" = "menu";
+ readonly ariaRole = input<"menu" | "dialog">("menu");
- @Input() ariaLabel: string;
+ readonly ariaLabel = input(undefined);
ngAfterContentInit() {
- if (this.ariaRole === "menu") {
+ if (this.ariaRole() === "menu") {
this.keyManager = new FocusKeyManager(this.menuItems)
.withWrap()
.skipPredicate((item) => item.disabled);
diff --git a/libs/components/src/multi-select/multi-select.component.html b/libs/components/src/multi-select/multi-select.component.html
index 0b46ef2662d..388360bc745 100644
--- a/libs/components/src/multi-select/multi-select.component.html
+++ b/libs/components/src/multi-select/multi-select.component.html
@@ -6,7 +6,7 @@
bindLabel="listName"
groupBy="parentGrouping"
[placeholder]="placeholder"
- [loading]="loading"
+ [loading]="loading()"
[loadingText]="loadingText"
notFoundText="{{ 'multiSelectNotFound' | i18n }}"
clearAllText="{{ 'multiSelectClearAll' | i18n }}"
diff --git a/libs/components/src/multi-select/multi-select.component.ts b/libs/components/src/multi-select/multi-select.component.ts
index 6fd87483780..6e9f629402e 100644
--- a/libs/components/src/multi-select/multi-select.component.ts
+++ b/libs/components/src/multi-select/multi-select.component.ts
@@ -12,6 +12,7 @@ import {
HostBinding,
Optional,
Self,
+ input,
} from "@angular/core";
import {
ControlValueAccessor,
@@ -46,11 +47,17 @@ export class MultiSelectComponent implements OnInit, BitFormFieldControl, Contro
@ViewChild(NgSelectComponent) select: NgSelectComponent;
// Parent component should only pass selectable items (complete list - selected items = baseItems)
+ // TODO: Skipped for migration because:
+ // Your application code writes to the input. This prevents migration.
@Input() baseItems: SelectItemView[];
// Defaults to native ng-select behavior - set to "true" to clear selected items on dropdown close
- @Input() removeSelectedItems = false;
+ readonly removeSelectedItems = input(false);
+ // TODO: Skipped for migration because:
+ // Your application code writes to the input. This prevents migration.
@Input() placeholder: string;
- @Input() loading = false;
+ readonly loading = input(false);
+ // TODO: Skipped for migration because:
+ // Your application code writes to the input. This prevents migration.
@Input({ transform: coerceBooleanProperty }) disabled?: boolean;
// Internal tracking of selected items
@@ -119,7 +126,7 @@ export class MultiSelectComponent implements OnInit, BitFormFieldControl, Contro
this.onItemsConfirmed.emit(this.selectedItems);
// Remove selected items from base list based on input property
- if (this.removeSelectedItems) {
+ if (this.removeSelectedItems()) {
let updatedBaseItems = this.baseItems;
this.selectedItems.forEach((selectedItem) => {
updatedBaseItems = updatedBaseItems.filter((item) => selectedItem.id !== item.id);
@@ -186,9 +193,14 @@ export class MultiSelectComponent implements OnInit, BitFormFieldControl, Contro
}
/**Implemented as part of BitFormFieldControl */
+ // TODO: Skipped for migration because:
+ // This input is used in combination with `@HostBinding` and migrating would
+ // break.
@HostBinding() @Input() id = `bit-multi-select-${nextId++}`;
/**Implemented as part of BitFormFieldControl */
+ // TODO: Skipped for migration because:
+ // Accessor inputs cannot be migrated as they are too complex.
@HostBinding("attr.required")
@Input()
get required() {
diff --git a/libs/components/src/navigation/nav-base.component.ts b/libs/components/src/navigation/nav-base.component.ts
index 9b222c9434f..301f94daf41 100644
--- a/libs/components/src/navigation/nav-base.component.ts
+++ b/libs/components/src/navigation/nav-base.component.ts
@@ -1,6 +1,6 @@
// FIXME: Update this file to be type safe and remove this and next line
// @ts-strict-ignore
-import { Directive, EventEmitter, Input, Output } from "@angular/core";
+import { Directive, EventEmitter, Input, Output, input } from "@angular/core";
import { RouterLink, RouterLinkActive } from "@angular/router";
/**
@@ -11,16 +11,19 @@ export abstract class NavBaseComponent {
/**
* Text to display in main content
*/
- @Input() text: string;
+ readonly text = input(undefined);
/**
* `aria-label` for main content
*/
- @Input() ariaLabel: string;
+ readonly ariaLabel = input(undefined);
/**
* Optional icon, e.g. `"bwi-collection-shared"`
*/
+ // TODO: Skipped for migration because:
+ // This input is used in a control flow expression (e.g. `@if` or `*ngIf`)
+ // and migrating would break narrowing currently.
@Input() icon: string;
/**
@@ -34,41 +37,43 @@ export abstract class NavBaseComponent {
*
* See: {@link https://github.com/angular/angular/issues/24482}
*/
- @Input() route?: RouterLink["routerLink"];
+ readonly route = input(undefined);
/**
* Passed to internal `routerLink`
*
* See {@link RouterLink.relativeTo}
*/
- @Input() relativeTo?: RouterLink["relativeTo"];
+ readonly relativeTo = input(undefined);
/**
* Passed to internal `routerLink`
*
* See {@link RouterLinkActive.routerLinkActiveOptions}
*/
- @Input() routerLinkActiveOptions?: RouterLinkActive["routerLinkActiveOptions"] = {
+ readonly routerLinkActiveOptions = input({
paths: "subset",
queryParams: "ignored",
fragment: "ignored",
matrixParams: "ignored",
- };
+ });
/**
* If this item is used within a tree, set `variant` to `"tree"`
*/
- @Input() variant: "default" | "tree" = "default";
+ readonly variant = input<"default" | "tree">("default");
/**
* Depth level when nested inside of a `'tree'` variant
*/
+ // TODO: Skipped for migration because:
+ // Your application code writes to the input. This prevents migration.
@Input() treeDepth = 0;
/**
* If `true`, do not change styles when nav item is active.
*/
- @Input() hideActiveStyles = false;
+ readonly hideActiveStyles = input(false);
/**
* Fires when main content is clicked
diff --git a/libs/components/src/navigation/nav-group.component.html b/libs/components/src/navigation/nav-group.component.html
index cbb270ad070..9b2cfabbf7e 100644
--- a/libs/components/src/navigation/nav-group.component.html
+++ b/libs/components/src/navigation/nav-group.component.html
@@ -1,15 +1,15 @@
-@if (!hideIfEmpty || nestedNavComponents.length > 0) {
+@if (!hideIfEmpty() || nestedNavComponents.length > 0) {
@@ -17,7 +17,7 @@
type="button"
class="tw-ms-auto"
[bitIconButton]="
- open ? 'bwi-angle-up' : variant === 'tree' ? 'bwi-angle-right' : 'bwi-angle-down'
+ open ? 'bwi-angle-up' : variant() === 'tree' ? 'bwi-angle-right' : 'bwi-angle-down'
"
[buttonType]="'light'"
(click)="toggle($event)"
@@ -26,18 +26,18 @@
aria-haspopup="true"
[attr.aria-expanded]="open.toString()"
[attr.aria-controls]="contentId"
- [attr.aria-label]="['toggleCollapse' | i18n, text].join(' ')"
+ [attr.aria-label]="['toggleCollapse' | i18n, text()].join(' ')"
>
- @if (variant === "tree") {
+ @if (variant() === "tree") {
}
- @if (variant !== "tree") {
+ @if (variant() !== "tree") {
}
@@ -47,7 +47,7 @@
@if (open) {
diff --git a/libs/components/src/navigation/nav-group.component.ts b/libs/components/src/navigation/nav-group.component.ts
index 5346a583e37..8c44cdb89ea 100644
--- a/libs/components/src/navigation/nav-group.component.ts
+++ b/libs/components/src/navigation/nav-group.component.ts
@@ -10,6 +10,7 @@ import {
Output,
QueryList,
SkipSelf,
+ input,
} from "@angular/core";
import { I18nPipe } from "@bitwarden/ui-common";
@@ -37,7 +38,7 @@ export class NavGroupComponent extends NavBaseComponent implements AfterContentI
/** When the side nav is open, the parent nav item should not show active styles when open. */
protected get parentHideActiveStyles(): boolean {
- return this.hideActiveStyles || (this.open && this.sideNavService.open);
+ return this.hideActiveStyles() || (this.open && this.sideNavService.open);
}
/**
@@ -48,14 +49,15 @@ export class NavGroupComponent extends NavBaseComponent implements AfterContentI
/**
* Is `true` if the expanded content is visible
*/
+ // TODO: Skipped for migration because:
+ // Your application code writes to the input. This prevents migration.
@Input()
open = false;
/**
* Automatically hide the nav group if there are no child buttons
*/
- @Input({ transform: booleanAttribute })
- hideIfEmpty = false;
+ readonly hideIfEmpty = input(false, { transform: booleanAttribute });
@Output()
openChange = new EventEmitter
();
@@ -84,7 +86,7 @@ export class NavGroupComponent extends NavBaseComponent implements AfterContentI
* - For any nested NavGroupComponents or NavItemComponents, increment the `treeDepth` by 1.
*/
private initNestedStyles() {
- if (this.variant !== "tree") {
+ if (this.variant() !== "tree") {
return;
}
[...this.nestedNavComponents].forEach((navGroupOrItem) => {
@@ -94,7 +96,7 @@ export class NavGroupComponent extends NavBaseComponent implements AfterContentI
protected handleMainContentClicked() {
if (!this.sideNavService.open) {
- if (!this.route) {
+ if (!this.route()) {
this.sideNavService.setOpen();
}
this.open = true;
diff --git a/libs/components/src/navigation/nav-item.component.html b/libs/components/src/navigation/nav-item.component.html
index f86f7e2c6d7..cba00c5efab 100644
--- a/libs/components/src/navigation/nav-item.component.html
+++ b/libs/components/src/navigation/nav-item.component.html
@@ -15,11 +15,13 @@
>
-
+
-
+
{{ text }}{{ text() }}
@@ -75,11 +77,11 @@
diff --git a/libs/components/src/navigation/nav-item.component.ts b/libs/components/src/navigation/nav-item.component.ts
index 23791c5b979..8d57a752702 100644
--- a/libs/components/src/navigation/nav-item.component.ts
+++ b/libs/components/src/navigation/nav-item.component.ts
@@ -1,5 +1,5 @@
import { CommonModule } from "@angular/common";
-import { Component, HostListener, Input, Optional } from "@angular/core";
+import { Component, HostListener, Optional, input } from "@angular/core";
import { RouterModule } from "@angular/router";
import { BehaviorSubject, map } from "rxjs";
@@ -21,7 +21,7 @@ export abstract class NavGroupAbstraction {
})
export class NavItemComponent extends NavBaseComponent {
/** Forces active styles to be shown, regardless of the `routerLinkActiveOptions` */
- @Input() forceActiveStyles? = false;
+ readonly forceActiveStyles = input
(false);
/**
* Is `true` if `to` matches the current route
@@ -34,7 +34,7 @@ export class NavItemComponent extends NavBaseComponent {
}
}
protected get showActiveStyles() {
- return this.forceActiveStyles || (this._isActive && !this.hideActiveStyles);
+ return this.forceActiveStyles() || (this._isActive && !this.hideActiveStyles());
}
/**
diff --git a/libs/components/src/navigation/nav-logo.component.html b/libs/components/src/navigation/nav-logo.component.html
index a6169315333..44ece8476fe 100644
--- a/libs/components/src/navigation/nav-logo.component.html
+++ b/libs/components/src/navigation/nav-logo.component.html
@@ -1,14 +1,14 @@
@if (sideNavService.open) {
}
@@ -16,8 +16,8 @@
}
diff --git a/libs/components/src/navigation/nav-logo.component.ts b/libs/components/src/navigation/nav-logo.component.ts
index 724406eeed5..2a971418913 100644
--- a/libs/components/src/navigation/nav-logo.component.ts
+++ b/libs/components/src/navigation/nav-logo.component.ts
@@ -1,7 +1,7 @@
// FIXME: Update this file to be type safe and remove this and next line
// @ts-strict-ignore
-import { Component, Input } from "@angular/core";
+import { Component, input } from "@angular/core";
import { RouterLinkActive, RouterLink } from "@angular/router";
import { Icon } from "../icon";
@@ -17,18 +17,18 @@ import { SideNavService } from "./side-nav.service";
})
export class NavLogoComponent {
/** Icon that is displayed when the side nav is closed */
- @Input() closedIcon = "bwi-shield";
+ readonly closedIcon = input("bwi-shield");
/** Icon that is displayed when the side nav is open */
- @Input({ required: true }) openIcon: Icon;
+ readonly openIcon = input.required();
/**
* Route to be passed to internal `routerLink`
*/
- @Input({ required: true }) route: string | any[];
+ readonly route = input.required();
/** Passed to `attr.aria-label` and `attr.title` */
- @Input({ required: true }) label: string;
+ readonly label = input.required();
constructor(protected sideNavService: SideNavService) {}
}
diff --git a/libs/components/src/navigation/side-nav.component.html b/libs/components/src/navigation/side-nav.component.html
index 3b77c981be4..63077b7996e 100644
--- a/libs/components/src/navigation/side-nav.component.html
+++ b/libs/components/src/navigation/side-nav.component.html
@@ -10,7 +10,7 @@
class="tw-fixed md:tw-sticky tw-inset-y-0 tw-left-0 tw-z-30 tw-flex tw-h-screen tw-flex-col tw-overscroll-none tw-overflow-auto tw-bg-background-alt3 tw-outline-none"
[ngClass]="{ 'tw-w-60': data.open }"
[ngStyle]="
- variant === 'secondary' && {
+ variant() === 'secondary' && {
'--color-text-alt2': 'var(--color-text-main)',
'--color-background-alt3': 'var(--color-secondary-100)',
'--color-background-alt4': 'var(--color-secondary-300)',
diff --git a/libs/components/src/navigation/side-nav.component.ts b/libs/components/src/navigation/side-nav.component.ts
index 49b08c63f7c..75365b738af 100644
--- a/libs/components/src/navigation/side-nav.component.ts
+++ b/libs/components/src/navigation/side-nav.component.ts
@@ -2,7 +2,7 @@
// @ts-strict-ignore
import { CdkTrapFocus } from "@angular/cdk/a11y";
import { CommonModule } from "@angular/common";
-import { Component, ElementRef, Input, ViewChild } from "@angular/core";
+import { Component, ElementRef, ViewChild, input } from "@angular/core";
import { I18nPipe } from "@bitwarden/ui-common";
@@ -19,7 +19,7 @@ export type SideNavVariant = "primary" | "secondary";
imports: [CommonModule, CdkTrapFocus, NavDividerComponent, BitIconButtonComponent, I18nPipe],
})
export class SideNavComponent {
- @Input() variant: SideNavVariant = "primary";
+ readonly variant = input("primary");
@ViewChild("toggleButton", { read: ElementRef, static: true })
private toggleButton: ElementRef;
diff --git a/libs/components/src/no-items/no-items.component.html b/libs/components/src/no-items/no-items.component.html
index ae2416d7a7b..a2659abb9a2 100644
--- a/libs/components/src/no-items/no-items.component.html
+++ b/libs/components/src/no-items/no-items.component.html
@@ -1,6 +1,6 @@
-
+
diff --git a/libs/components/src/no-items/no-items.component.ts b/libs/components/src/no-items/no-items.component.ts
index 20ce95a53ba..7c00999f59f 100644
--- a/libs/components/src/no-items/no-items.component.ts
+++ b/libs/components/src/no-items/no-items.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from "@angular/core";
+import { Component, input } from "@angular/core";
import { Icons } from "..";
import { BitIconComponent } from "../icon/icon.component";
@@ -12,5 +12,5 @@ import { BitIconComponent } from "../icon/icon.component";
imports: [BitIconComponent],
})
export class NoItemsComponent {
- @Input() icon = Icons.Search;
+ readonly icon = input(Icons.Search);
}
diff --git a/libs/components/src/popover/popover-trigger-for.directive.ts b/libs/components/src/popover/popover-trigger-for.directive.ts
index 47fda1ca267..5dd84b40446 100644
--- a/libs/components/src/popover/popover-trigger-for.directive.ts
+++ b/libs/components/src/popover/popover-trigger-for.directive.ts
@@ -11,6 +11,7 @@ import {
Input,
OnDestroy,
ViewContainerRef,
+ input,
} from "@angular/core";
import { Observable, Subscription, filter, mergeWith } from "rxjs";
@@ -22,25 +23,25 @@ import { PopoverComponent } from "./popover.component";
exportAs: "popoverTrigger",
})
export class PopoverTriggerForDirective implements OnDestroy, AfterViewInit {
+ // TODO: Skipped for migration because:
+ // Your application code writes to the input. This prevents migration.
@Input()
@HostBinding("attr.aria-expanded")
popoverOpen = false;
- @Input("bitPopoverTriggerFor")
- popover: PopoverComponent;
+ readonly popover = input
(undefined, { alias: "bitPopoverTriggerFor" });
- @Input("position")
- position: string;
+ readonly position = input(undefined);
private overlayRef: OverlayRef;
private closedEventsSub: Subscription;
get positions() {
- if (!this.position) {
+ if (!this.position()) {
return defaultPositions;
}
- const preferredPosition = defaultPositions.find((position) => position.id === this.position);
+ const preferredPosition = defaultPositions.find((position) => position.id === this.position());
if (preferredPosition) {
return [preferredPosition, ...defaultPositions];
@@ -83,7 +84,7 @@ export class PopoverTriggerForDirective implements OnDestroy, AfterViewInit {
this.popoverOpen = true;
this.overlayRef = this.overlay.create(this.defaultPopoverConfig);
- const templatePortal = new TemplatePortal(this.popover.templateRef, this.viewContainerRef);
+ const templatePortal = new TemplatePortal(this.popover().templateRef, this.viewContainerRef);
this.overlayRef.attach(templatePortal);
this.closedEventsSub = this.getClosedEvents().subscribe(() => {
@@ -97,7 +98,7 @@ export class PopoverTriggerForDirective implements OnDestroy, AfterViewInit {
.keydownEvents()
.pipe(filter((event: KeyboardEvent) => event.key === "Escape"));
const backdrop = this.overlayRef.backdropClick();
- const popoverClosed = this.popover.closed;
+ const popoverClosed = this.popover().closed;
return detachments.pipe(mergeWith(escKey, backdrop, popoverClosed));
}
diff --git a/libs/components/src/popover/popover.component.html b/libs/components/src/popover/popover.component.html
index 05db9112b8a..dfcf3ff5d01 100644
--- a/libs/components/src/popover/popover.component.html
+++ b/libs/components/src/popover/popover.component.html
@@ -6,7 +6,7 @@
>
- {{ title }}
+ {{ title() }}