[PM-2340] Enable use-lifecycle-interface (#5488)

Enables one of the recommended rules of @angular-eslint. Since this rule was fairly trivial to fix and has no QA effects it seemed reasonable to migrate all code.

.eslintrc.json

@@ -16,11 +16,12 @@
       },
       "extends": [
         "eslint:recommended",
+        "plugin:@angular-eslint/recommended",
         "plugin:@typescript-eslint/recommended",
         "plugin:import/recommended",
         "plugin:import/typescript",
-        "prettier",
         "plugin:rxjs/recommended",
+        "prettier",
         "plugin:storybook/recommended"
       ],
       "settings": {
@@ -34,6 +35,19 @@
         }
       },
       "rules": {
+        "@angular-eslint/component-class-suffix": 0,
+        "@angular-eslint/contextual-lifecycle": 0,
+        "@angular-eslint/directive-class-suffix": 0,
+        "@angular-eslint/no-empty-lifecycle-method": 0,
+        "@angular-eslint/no-host-metadata-property": 0,
+        "@angular-eslint/no-input-rename": 0,
+        "@angular-eslint/no-inputs-metadata-property": 0,
+        "@angular-eslint/no-output-native": 0,
+        "@angular-eslint/no-output-on-prefix": 0,
+        "@angular-eslint/no-output-rename": 0,
+        "@angular-eslint/no-outputs-metadata-property": 0,
+        "@angular-eslint/use-lifecycle-interface": "error",
+        "@angular-eslint/use-pipe-transform-interface": 0,
         "@typescript-eslint/explicit-member-accessibility": [
           "error",
           { "accessibility": "no-public" }

apps/browser/src/auth/popup/lock.component.ts

@@ -1,4 +1,4 @@
-import { Component, NgZone } from "@angular/core";
+import { Component, NgZone, OnInit } from "@angular/core";
 import { Router } from "@angular/router";
 import { firstValueFrom } from "rxjs";
 
@@ -36,7 +36,7 @@ import { fido2PopoutSessionData$ } from "../../vault/popup/utils/fido2-popout-se
   selector: "app-lock",
   templateUrl: "lock.component.html",
 })
-export class LockComponent extends BaseLockComponent {
+export class LockComponent extends BaseLockComponent implements OnInit {
   private isInitialLockScreen: boolean;
 
   biometricError: string;

apps/browser/src/auth/popup/settings/account-security.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, OnInit } from "@angular/core";
+import { ChangeDetectorRef, Component, OnDestroy, OnInit } from "@angular/core";
 import { FormBuilder } from "@angular/forms";
 import {
   BehaviorSubject,
@@ -52,7 +52,7 @@ import { AwaitDesktopDialogComponent } from "./await-desktop-dialog.component";
   templateUrl: "account-security.component.html",
 })
 // eslint-disable-next-line rxjs-angular/prefer-takeuntil
-export class AccountSecurityComponent implements OnInit {
+export class AccountSecurityComponent implements OnInit, OnDestroy {
   protected readonly VaultTimeoutAction = VaultTimeoutAction;
 
   availableVaultTimeoutActions: VaultTimeoutAction[] = [];

apps/browser/src/auth/popup/two-factor-auth-duo.component.ts

@@ -1,6 +1,6 @@
 import { DialogModule } from "@angular/cdk/dialog";
 import { CommonModule } from "@angular/common";
-import { Component } from "@angular/core";
+import { Component, OnDestroy, OnInit } from "@angular/core";
 import { ReactiveFormsModule, FormsModule } from "@angular/forms";
 import { Subject, Subscription, filter, firstValueFrom, takeUntil } from "rxjs";
 
@@ -38,7 +38,10 @@ import { ZonedMessageListenerService } from "../../platform/browser/zoned-messag
   ],
   providers: [I18nPipe],
 })
-export class TwoFactorAuthDuoComponent extends TwoFactorAuthDuoBaseComponent {
+export class TwoFactorAuthDuoComponent
+  extends TwoFactorAuthDuoBaseComponent
+  implements OnInit, OnDestroy
+{
   private destroy$ = new Subject<void>();
   duoResultSubscription: Subscription;
 

apps/browser/src/auth/popup/two-factor-auth-email.component.ts

@@ -1,6 +1,6 @@
 import { DialogModule } from "@angular/cdk/dialog";
 import { CommonModule } from "@angular/common";
-import { Component, inject } from "@angular/core";
+import { Component, OnInit, inject } from "@angular/core";
 import { ReactiveFormsModule, FormsModule } from "@angular/forms";
 
 import { TwoFactorAuthEmailComponent as TwoFactorAuthEmailBaseComponent } from "@bitwarden/angular/auth/components/two-factor-auth/two-factor-auth-email.component";
@@ -34,7 +34,7 @@ import BrowserPopupUtils from "../../platform/popup/browser-popup-utils";
   ],
   providers: [I18nPipe],
 })
-export class TwoFactorAuthEmailComponent extends TwoFactorAuthEmailBaseComponent {
+export class TwoFactorAuthEmailComponent extends TwoFactorAuthEmailBaseComponent implements OnInit {
   private dialogService = inject(DialogService);
 
   async ngOnInit(): Promise<void> {

apps/browser/src/auth/popup/two-factor-auth.component.ts

@@ -1,5 +1,5 @@
 import { CommonModule } from "@angular/common";
-import { Component, Inject, OnInit } from "@angular/core";
+import { Component, Inject, OnDestroy, OnInit } from "@angular/core";
 import { FormBuilder, ReactiveFormsModule } from "@angular/forms";
 import { ActivatedRoute, Router, RouterLink } from "@angular/router";
 
@@ -71,7 +71,10 @@ import { TwoFactorAuthEmailComponent } from "./two-factor-auth-email.component";
   ],
   providers: [I18nPipe],
 })
-export class TwoFactorAuthComponent extends BaseTwoFactorAuthComponent implements OnInit {
+export class TwoFactorAuthComponent
+  extends BaseTwoFactorAuthComponent
+  implements OnInit, OnDestroy
+{
   constructor(
     protected loginStrategyService: LoginStrategyServiceAbstraction,
     protected router: Router,

apps/browser/src/auth/popup/two-factor.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject } from "@angular/core";
+import { Component, Inject, OnDestroy, OnInit } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
 import { Subject, Subscription, firstValueFrom } from "rxjs";
 import { filter, first, takeUntil } from "rxjs/operators";
@@ -37,7 +37,7 @@ import { closeTwoFactorAuthPopout } from "./utils/auth-popout-window";
   selector: "app-two-factor",
   templateUrl: "two-factor.component.html",
 })
-export class TwoFactorComponent extends BaseTwoFactorComponent {
+export class TwoFactorComponent extends BaseTwoFactorComponent implements OnInit, OnDestroy {
   private destroy$ = new Subject<void>();
   inPopout = BrowserPopupUtils.inPopout(window);
 

apps/browser/src/tools/popup/generator/generator.component.ts

@@ -1,5 +1,5 @@
 import { Location } from "@angular/common";
-import { Component, NgZone } from "@angular/core";
+import { Component, NgZone, OnInit } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
 import { firstValueFrom } from "rxjs";
 
@@ -21,7 +21,7 @@ import {
   selector: "app-generator",
   templateUrl: "generator.component.html",
 })
-export class GeneratorComponent extends BaseGeneratorComponent {
+export class GeneratorComponent extends BaseGeneratorComponent implements OnInit {
   private addEditCipherInfo: AddEditCipherInfo;
   private cipherState: CipherView;
   private cipherService: CipherService;

apps/browser/src/tools/popup/send/send-add-edit.component.ts

@@ -1,5 +1,5 @@
 import { DatePipe, Location } from "@angular/common";
-import { Component } from "@angular/core";
+import { Component, OnInit } from "@angular/core";
 import { FormBuilder } from "@angular/forms";
 import { ActivatedRoute, Router } from "@angular/router";
 import { first } from "rxjs/operators";
@@ -26,7 +26,7 @@ import { FilePopoutUtilsService } from "../services/file-popout-utils.service";
   templateUrl: "send-add-edit.component.html",
 })
 // eslint-disable-next-line rxjs-angular/prefer-takeuntil
-export class SendAddEditComponent extends BaseAddEditComponent {
+export class SendAddEditComponent extends BaseAddEditComponent implements OnInit {
   // Options header
   showOptions = false;
   // File visibility

apps/browser/src/tools/popup/send/send-groupings.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, NgZone } from "@angular/core";
+import { ChangeDetectorRef, Component, NgZone, OnDestroy, OnInit } from "@angular/core";
 import { Router } from "@angular/router";
 
 import { SendComponent as BaseSendComponent } from "@bitwarden/angular/tools/send/send.component";
@@ -26,7 +26,7 @@ const ComponentId = "SendComponent";
   selector: "app-send-groupings",
   templateUrl: "send-groupings.component.html",
 })
-export class SendGroupingsComponent extends BaseSendComponent {
+export class SendGroupingsComponent extends BaseSendComponent implements OnInit, OnDestroy {
   // Header
   showLeftHeader = true;
   // State Handling

apps/browser/src/tools/popup/send/send-type.component.ts

@@ -1,5 +1,5 @@
 import { Location } from "@angular/common";
-import { ChangeDetectorRef, Component, NgZone } from "@angular/core";
+import { ChangeDetectorRef, Component, NgZone, OnDestroy, OnInit } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
 import { first } from "rxjs/operators";
 
@@ -27,7 +27,7 @@ const ComponentId = "SendTypeComponent";
   selector: "app-send-type",
   templateUrl: "send-type.component.html",
 })
-export class SendTypeComponent extends BaseSendComponent {
+export class SendTypeComponent extends BaseSendComponent implements OnInit, OnDestroy {
   groupingTitle: string;
   // State Handling
   state: BrowserComponentState;

apps/browser/src/vault/popup/components/vault/add-edit.component.ts

@@ -1,5 +1,5 @@
 import { DatePipe, Location } from "@angular/common";
-import { Component } from "@angular/core";
+import { Component, OnInit } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
 import qrcodeParser from "qrcode-parser";
 import { firstValueFrom } from "rxjs";
@@ -39,7 +39,7 @@ import { closeAddEditVaultItemPopout, VaultPopoutType } from "../../utils/vault-
   templateUrl: "add-edit.component.html",
 })
 // eslint-disable-next-line rxjs-angular/prefer-takeuntil
-export class AddEditComponent extends BaseAddEditComponent {
+export class AddEditComponent extends BaseAddEditComponent implements OnInit {
   currentUris: string[];
   showAttachments = true;
   openAttachmentsInPopup: boolean;

apps/browser/src/vault/popup/components/vault/attachments.component.ts

@@ -1,5 +1,5 @@
 import { Location } from "@angular/common";
-import { Component } from "@angular/core";
+import { Component, OnInit } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
 import { first } from "rxjs/operators";
 
@@ -20,7 +20,7 @@ import { DialogService } from "@bitwarden/components";
   templateUrl: "attachments.component.html",
 })
 // eslint-disable-next-line rxjs-angular/prefer-takeuntil
-export class AttachmentsComponent extends BaseAttachmentsComponent {
+export class AttachmentsComponent extends BaseAttachmentsComponent implements OnInit {
   openedAttachmentsInPopup: boolean;
 
   constructor(

apps/browser/src/vault/popup/components/vault/collections.component.ts

@@ -1,5 +1,5 @@
 import { Location } from "@angular/common";
-import { Component } from "@angular/core";
+import { Component, OnInit } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
 import { first } from "rxjs/operators";
 
@@ -17,7 +17,7 @@ import { CollectionService } from "@bitwarden/common/vault/abstractions/collecti
   templateUrl: "collections.component.html",
 })
 // eslint-disable-next-line rxjs-angular/prefer-takeuntil
-export class CollectionsComponent extends BaseCollectionsComponent {
+export class CollectionsComponent extends BaseCollectionsComponent implements OnInit {
   constructor(
     collectionService: CollectionService,
     platformUtilsService: PlatformUtilsService,

apps/browser/src/vault/popup/components/vault/password-history.component.ts

@@ -1,5 +1,5 @@
 import { Location } from "@angular/common";
-import { Component } from "@angular/core";
+import { Component, OnInit } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
 import { first } from "rxjs/operators";
 
@@ -13,7 +13,7 @@ import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.servi
   templateUrl: "password-history.component.html",
 })
 // eslint-disable-next-line rxjs-angular/prefer-takeuntil
-export class PasswordHistoryComponent extends BasePasswordHistoryComponent {
+export class PasswordHistoryComponent extends BasePasswordHistoryComponent implements OnInit {
   constructor(
     cipherService: CipherService,
     platformUtilsService: PlatformUtilsService,

apps/browser/src/vault/popup/components/vault/share.component.ts

@@ -1,4 +1,4 @@
-import { Component } from "@angular/core";
+import { Component, OnInit } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
 import { first } from "rxjs/operators";
 
@@ -15,7 +15,7 @@ import { CollectionService } from "@bitwarden/common/vault/abstractions/collecti
   templateUrl: "share.component.html",
 })
 // eslint-disable-next-line rxjs-angular/prefer-takeuntil
-export class ShareComponent extends BaseShareComponent {
+export class ShareComponent extends BaseShareComponent implements OnInit {
   constructor(
     collectionService: CollectionService,
     platformUtilsService: PlatformUtilsService,

apps/browser/src/vault/popup/components/vault/view.component.ts

@@ -1,5 +1,5 @@
 import { DatePipe, Location } from "@angular/common";
-import { ChangeDetectorRef, Component, NgZone } from "@angular/core";
+import { ChangeDetectorRef, Component, NgZone, OnInit, OnDestroy } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
 import { Subject, firstValueFrom, takeUntil, Subscription } from "rxjs";
 import { first } from "rxjs/operators";
@@ -52,7 +52,7 @@ type LoadAction = typeof AUTOFILL_ID | typeof SHOW_AUTOFILL_BUTTON | CopyAction;
   selector: "app-vault-view",
   templateUrl: "view.component.html",
 })
-export class ViewComponent extends BaseViewComponent {
+export class ViewComponent extends BaseViewComponent implements OnInit, OnDestroy {
   showAttachments = true;
   pageDetails: any[] = [];
   tab: any;

apps/browser/src/vault/popup/settings/folder-add-edit.component.ts

@@ -1,4 +1,4 @@
-import { Component } from "@angular/core";
+import { Component, OnInit } from "@angular/core";
 import { FormBuilder } from "@angular/forms";
 import { ActivatedRoute, Router } from "@angular/router";
 import { first } from "rxjs/operators";
@@ -16,7 +16,7 @@ import { DialogService } from "@bitwarden/components";
   templateUrl: "folder-add-edit.component.html",
 })
 // eslint-disable-next-line rxjs-angular/prefer-takeuntil
-export class FolderAddEditComponent extends BaseFolderAddEditComponent {
+export class FolderAddEditComponent extends BaseFolderAddEditComponent implements OnInit {
   constructor(
     folderService: FolderService,
     folderApiService: FolderApiServiceAbstraction,

apps/desktop/src/app/accounts/settings.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnDestroy, OnInit } from "@angular/core";
 import { FormBuilder } from "@angular/forms";
 import { BehaviorSubject, Observable, Subject, firstValueFrom } from "rxjs";
 import { concatMap, debounceTime, filter, map, switchMap, takeUntil, tap } from "rxjs/operators";
@@ -41,7 +41,7 @@ import { NativeMessagingManifestService } from "../services/native-messaging-man
   templateUrl: "settings.component.html",
 })
 // eslint-disable-next-line rxjs-angular/prefer-takeuntil
-export class SettingsComponent implements OnInit {
+export class SettingsComponent implements OnInit, OnDestroy {
   // For use in template
   protected readonly VaultTimeoutAction = VaultTimeoutAction;
 

apps/desktop/src/auth/lock.component.ts

@@ -1,4 +1,4 @@
-import { Component, NgZone } from "@angular/core";
+import { Component, NgZone, OnDestroy, OnInit } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
 import { firstValueFrom, switchMap } from "rxjs";
 
@@ -35,7 +35,7 @@ const BroadcasterSubscriptionId = "LockComponent";
   selector: "app-lock",
   templateUrl: "lock.component.html",
 })
-export class LockComponent extends BaseLockComponent {
+export class LockComponent extends BaseLockComponent implements OnInit, OnDestroy {
   private deferFocus: boolean = null;
   protected biometricReady = false;
   private biometricAsked = false;

apps/desktop/src/auth/login/login.component.ts

@@ -1,4 +1,4 @@
-import { Component, NgZone, OnDestroy, ViewChild, ViewContainerRef } from "@angular/core";
+import { Component, NgZone, OnDestroy, OnInit, ViewChild, ViewContainerRef } from "@angular/core";
 import { FormBuilder } from "@angular/forms";
 import { ActivatedRoute, Router } from "@angular/router";
 import { Subject, takeUntil } from "rxjs";
@@ -34,7 +34,7 @@ const BroadcasterSubscriptionId = "LoginComponent";
   selector: "app-login",
   templateUrl: "login.component.html",
 })
-export class LoginComponent extends BaseLoginComponent implements OnDestroy {
+export class LoginComponent extends BaseLoginComponent implements OnInit, OnDestroy {
   @ViewChild("environment", { read: ViewContainerRef, static: true })
   environmentModal: ViewContainerRef;
 

apps/desktop/src/auth/set-password.component.ts

@@ -1,4 +1,4 @@
-import { Component, NgZone, OnDestroy } from "@angular/core";
+import { Component, NgZone, OnDestroy, OnInit } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
 
 import { SetPasswordComponent as BaseSetPasswordComponent } from "@bitwarden/angular/auth/components/set-password.component";
@@ -30,7 +30,7 @@ const BroadcasterSubscriptionId = "SetPasswordComponent";
   selector: "app-set-password",
   templateUrl: "set-password.component.html",
 })
-export class SetPasswordComponent extends BaseSetPasswordComponent implements OnDestroy {
+export class SetPasswordComponent extends BaseSetPasswordComponent implements OnInit, OnDestroy {
   constructor(
     accountService: AccountService,
     masterPasswordService: InternalMasterPasswordServiceAbstraction,

apps/desktop/src/auth/two-factor-auth-duo.component.ts

@@ -1,6 +1,6 @@
 import { DialogModule } from "@angular/cdk/dialog";
 import { CommonModule } from "@angular/common";
-import { Component, NgZone } from "@angular/core";
+import { Component, NgZone, OnDestroy, OnInit } from "@angular/core";
 import { ReactiveFormsModule, FormsModule } from "@angular/forms";
 import { firstValueFrom } from "rxjs";
 
@@ -42,7 +42,10 @@ const BroadcasterSubscriptionId = "TwoFactorComponent";
   ],
   providers: [I18nPipe],
 })
-export class TwoFactorAuthDuoComponent extends TwoFactorAuthDuoBaseComponent {
+export class TwoFactorAuthDuoComponent
+  extends TwoFactorAuthDuoBaseComponent
+  implements OnInit, OnDestroy
+{
   constructor(
     protected i18nService: I18nService,
     protected platformUtilsService: PlatformUtilsService,

apps/desktop/src/auth/two-factor.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject, NgZone, ViewChild, ViewContainerRef } from "@angular/core";
+import { Component, Inject, NgZone, OnDestroy, ViewChild, ViewContainerRef } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
 import { firstValueFrom } from "rxjs";
 
@@ -36,7 +36,7 @@ const BroadcasterSubscriptionId = "TwoFactorComponent";
   templateUrl: "two-factor.component.html",
 })
 // eslint-disable-next-line rxjs-angular/prefer-takeuntil
-export class TwoFactorComponent extends BaseTwoFactorComponent {
+export class TwoFactorComponent extends BaseTwoFactorComponent implements OnDestroy {
   @ViewChild("twoFactorOptions", { read: ViewContainerRef, static: true })
   twoFactorOptionsModal: ViewContainerRef;
 

apps/desktop/src/vault/app/vault/add-edit.component.ts

@@ -1,5 +1,5 @@
 import { DatePipe } from "@angular/common";
-import { Component, NgZone, OnChanges, OnDestroy, ViewChild } from "@angular/core";
+import { Component, NgZone, OnChanges, OnInit, OnDestroy, ViewChild } from "@angular/core";
 import { NgForm } from "@angular/forms";
 
 import { AddEditComponent as BaseAddEditComponent } from "@bitwarden/angular/vault/components/add-edit.component";
@@ -27,7 +27,7 @@ const BroadcasterSubscriptionId = "AddEditComponent";
   selector: "app-vault-add-edit",
   templateUrl: "add-edit.component.html",
 })
-export class AddEditComponent extends BaseAddEditComponent implements OnChanges, OnDestroy {
+export class AddEditComponent extends BaseAddEditComponent implements OnInit, OnChanges, OnDestroy {
   @ViewChild("form")
   private form: NgForm;
   constructor(

apps/desktop/src/vault/app/vault/view.component.ts

@@ -5,6 +5,8 @@ import {
   EventEmitter,
   NgZone,
   OnChanges,
+  OnDestroy,
+  OnInit,
   Output,
 } from "@angular/core";
 
@@ -35,7 +37,7 @@ const BroadcasterSubscriptionId = "ViewComponent";
   selector: "app-vault-view",
   templateUrl: "view.component.html",
 })
-export class ViewComponent extends BaseViewComponent implements OnChanges {
+export class ViewComponent extends BaseViewComponent implements OnInit, OnDestroy, OnChanges {
   @Output() onViewCipherPasswordHistory = new EventEmitter<CipherView>();
 
   constructor(

apps/web/src/app/auth/hint.component.ts

@@ -1,4 +1,4 @@
-import { Component } from "@angular/core";
+import { Component, OnInit } from "@angular/core";
 import { FormBuilder, Validators } from "@angular/forms";
 import { Router } from "@angular/router";
 
@@ -13,7 +13,7 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
   selector: "app-hint",
   templateUrl: "hint.component.html",
 })
-export class HintComponent extends BaseHintComponent {
+export class HintComponent extends BaseHintComponent implements OnInit {
   formGroup = this.formBuilder.group({
     email: ["", [Validators.email, Validators.required]],
   });

apps/web/src/app/auth/lock.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject } from "@angular/core";
+import { Component, OnInit, inject } from "@angular/core";
 import { FormBuilder, Validators } from "@angular/forms";
 
 import { LockComponent as BaseLockComponent } from "@bitwarden/angular/auth/components/lock.component";
@@ -11,7 +11,7 @@ import { SharedModule } from "../shared";
   standalone: true,
   imports: [SharedModule],
 })
-export class LockComponent extends BaseLockComponent {
+export class LockComponent extends BaseLockComponent implements OnInit {
   formBuilder = inject(FormBuilder);
 
   formGroup = this.formBuilder.group({

apps/web/src/app/auth/register-form/register-form.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from "@angular/core";
+import { Component, Input, OnInit } from "@angular/core";
 import { UntypedFormBuilder } from "@angular/forms";
 import { Router } from "@angular/router";
 
@@ -26,7 +26,7 @@ import { AcceptOrganizationInviteService } from "../organization-invite/accept-o
   selector: "app-register-form",
   templateUrl: "./register-form.component.html",
 })
-export class RegisterFormComponent extends BaseRegisterComponent {
+export class RegisterFormComponent extends BaseRegisterComponent implements OnInit {
   @Input() queryParamEmail: string;
   @Input() queryParamFromOrgInvite: boolean;
   @Input() enforcedPolicyOptions: MasterPasswordPolicyOptions;

apps/web/src/app/auth/settings/account/account.component.ts

@@ -1,4 +1,4 @@
-import { Component, ViewChild, ViewContainerRef } from "@angular/core";
+import { Component, OnInit, ViewChild, ViewContainerRef } from "@angular/core";
 import { lastValueFrom } from "rxjs";
 
 import { ModalService } from "@bitwarden/angular/services/modal.service";
@@ -14,7 +14,7 @@ import { DeleteAccountDialogComponent } from "./delete-account-dialog.component"
   selector: "app-account",
   templateUrl: "account.component.html",
 })
-export class AccountComponent {
+export class AccountComponent implements OnInit {
   @ViewChild("deauthorizeSessionsTemplate", { read: ViewContainerRef, static: true })
   deauthModalRef: ViewContainerRef;
 

apps/web/src/app/auth/settings/account/profile.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnDestroy, OnInit } from "@angular/core";
 import { FormControl, FormGroup } from "@angular/forms";
 import { Subject, takeUntil } from "rxjs";
 
@@ -16,7 +16,7 @@ import { ChangeAvatarDialogComponent } from "./change-avatar-dialog.component";
   selector: "app-profile",
   templateUrl: "profile.component.html",
 })
-export class ProfileComponent implements OnInit {
+export class ProfileComponent implements OnInit, OnDestroy {
   loading = true;
   profile: ProfileResponse;
   fingerprintMaterial: string;

apps/web/src/app/auth/settings/change-password.component.ts

@@ -1,4 +1,4 @@
-import { Component } from "@angular/core";
+import { Component, OnDestroy, OnInit } from "@angular/core";
 import { Router } from "@angular/router";
 import { firstValueFrom, map } from "rxjs";
 
@@ -31,7 +31,10 @@ import { UserKeyRotationService } from "../key-rotation/user-key-rotation.servic
   selector: "app-change-password",
   templateUrl: "change-password.component.html",
 })
-export class ChangePasswordComponent extends BaseChangePasswordComponent {
+export class ChangePasswordComponent
+  extends BaseChangePasswordComponent
+  implements OnInit, OnDestroy
+{
   rotateUserKey = false;
   currentMasterPassword: string;
   masterPasswordHint: string;

apps/web/src/app/auth/settings/security/change-kdf/change-kdf.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnDestroy, OnInit } from "@angular/core";
 import { FormBuilder, FormControl, ValidatorFn, Validators } from "@angular/forms";
 import { Subject, takeUntil } from "rxjs";
 
@@ -18,7 +18,7 @@ import { ChangeKdfConfirmationComponent } from "./change-kdf-confirmation.compon
   selector: "app-change-kdf",
   templateUrl: "change-kdf.component.html",
 })
-export class ChangeKdfComponent implements OnInit {
+export class ChangeKdfComponent implements OnInit, OnDestroy {
   kdfConfig: KdfConfig = DEFAULT_KDF_CONFIG;
   kdfOptions: any[] = [];
   private destroy$ = new Subject<void>();

apps/web/src/app/auth/settings/security/security.component.ts

@@ -1,4 +1,4 @@
-import { Component } from "@angular/core";
+import { Component, OnInit } from "@angular/core";
 
 import { UserVerificationService } from "@bitwarden/common/auth/abstractions/user-verification/user-verification.service.abstraction";
 
@@ -6,7 +6,7 @@ import { UserVerificationService } from "@bitwarden/common/auth/abstractions/use
   selector: "app-security",
   templateUrl: "security.component.html",
 })
-export class SecurityComponent {
+export class SecurityComponent implements OnInit {
   showChangePassword = true;
 
   constructor(private userVerificationService: UserVerificationService) {}

apps/web/src/app/auth/settings/two-factor-duo.component.ts

@@ -1,5 +1,5 @@
 import { DIALOG_DATA, DialogConfig, DialogRef } from "@angular/cdk/dialog";
-import { Component, EventEmitter, Inject, Output } from "@angular/core";
+import { Component, EventEmitter, Inject, OnInit, Output } from "@angular/core";
 import { FormBuilder, Validators } from "@angular/forms";
 
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
@@ -19,7 +19,7 @@ import { TwoFactorBaseComponent } from "./two-factor-base.component";
   selector: "app-two-factor-duo",
   templateUrl: "two-factor-duo.component.html",
 })
-export class TwoFactorDuoComponent extends TwoFactorBaseComponent {
+export class TwoFactorDuoComponent extends TwoFactorBaseComponent implements OnInit {
   @Output() onChangeStatus: EventEmitter<boolean> = new EventEmitter();
 
   type = TwoFactorProviderType.Duo;

apps/web/src/app/auth/settings/two-factor-email.component.ts

@@ -1,5 +1,5 @@
 import { DIALOG_DATA, DialogConfig, DialogRef } from "@angular/cdk/dialog";
-import { Component, EventEmitter, Inject, Output } from "@angular/core";
+import { Component, EventEmitter, Inject, OnInit, Output } from "@angular/core";
 import { FormBuilder, Validators } from "@angular/forms";
 import { firstValueFrom, map } from "rxjs";
 
@@ -23,7 +23,7 @@ import { TwoFactorBaseComponent } from "./two-factor-base.component";
   templateUrl: "two-factor-email.component.html",
   outputs: ["onUpdated"],
 })
-export class TwoFactorEmailComponent extends TwoFactorBaseComponent {
+export class TwoFactorEmailComponent extends TwoFactorBaseComponent implements OnInit {
   @Output() onChangeStatus: EventEmitter<boolean> = new EventEmitter();
   type = TwoFactorProviderType.Email;
   sentEmail: string;

apps/web/src/app/auth/settings/two-factor-yubikey.component.ts

@@ -1,5 +1,5 @@
 import { DIALOG_DATA, DialogConfig } from "@angular/cdk/dialog";
-import { Component, Inject } from "@angular/core";
+import { Component, Inject, OnInit } from "@angular/core";
 import { FormArray, FormBuilder, FormControl, FormGroup } from "@angular/forms";
 
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
@@ -24,7 +24,7 @@ interface Key {
   selector: "app-two-factor-yubikey",
   templateUrl: "two-factor-yubikey.component.html",
 })
-export class TwoFactorYubiKeyComponent extends TwoFactorBaseComponent {
+export class TwoFactorYubiKeyComponent extends TwoFactorBaseComponent implements OnInit {
   type = TwoFactorProviderType.Yubikey;
   keys: Key[];
   anyKeyHasNfc = false;

apps/web/src/app/auth/sso.component.ts

@@ -1,4 +1,4 @@
-import { Component } from "@angular/core";
+import { Component, OnInit } from "@angular/core";
 import { FormControl, FormGroup, Validators } from "@angular/forms";
 import { ActivatedRoute, Router } from "@angular/router";
 import { firstValueFrom } from "rxjs";
@@ -32,7 +32,7 @@ import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legac
   templateUrl: "sso.component.html",
 })
 // eslint-disable-next-line rxjs-angular/prefer-takeuntil
-export class SsoComponent extends BaseSsoComponent {
+export class SsoComponent extends BaseSsoComponent implements OnInit {
   protected formGroup = new FormGroup({
     identifier: new FormControl(null, [Validators.required]),
   });

apps/web/src/app/auth/two-factor-auth-duo.component.ts

@@ -1,6 +1,6 @@
 import { DialogModule } from "@angular/cdk/dialog";
 import { CommonModule } from "@angular/common";
-import { Component } from "@angular/core";
+import { Component, OnDestroy, OnInit } from "@angular/core";
 import { ReactiveFormsModule, FormsModule } from "@angular/forms";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
@@ -32,7 +32,10 @@ import { TypographyModule } from "../../../../../libs/components/src/typography"
   ],
   providers: [I18nPipe],
 })
-export class TwoFactorAuthDuoComponent extends TwoFactorAuthDuoBaseComponent {
+export class TwoFactorAuthDuoComponent
+  extends TwoFactorAuthDuoBaseComponent
+  implements OnInit, OnDestroy
+{
   async ngOnInit(): Promise<void> {
     await super.ngOnInit();
   }

apps/web/src/app/auth/two-factor.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject, OnDestroy, ViewChild, ViewContainerRef } from "@angular/core";
+import { Component, Inject, OnDestroy, OnInit, ViewChild, ViewContainerRef } from "@angular/core";
 import { FormBuilder, Validators } from "@angular/forms";
 import { ActivatedRoute, Router } from "@angular/router";
 import { Subject, takeUntil, lastValueFrom } from "rxjs";
@@ -36,7 +36,7 @@ import {
   templateUrl: "two-factor.component.html",
 })
 // eslint-disable-next-line rxjs-angular/prefer-takeuntil
-export class TwoFactorComponent extends BaseTwoFactorComponent implements OnDestroy {
+export class TwoFactorComponent extends BaseTwoFactorComponent implements OnInit, OnDestroy {
   @ViewChild("twoFactorOptions", { read: ViewContainerRef, static: true })
   twoFactorOptionsModal: ViewContainerRef;
   formGroup = this.formBuilder.group({

apps/web/src/app/billing/organizations/change-plan-dialog.component.ts

@@ -1,5 +1,14 @@
 import { DIALOG_DATA, DialogConfig, DialogRef } from "@angular/cdk/dialog";
-import { Component, EventEmitter, Inject, Input, OnInit, Output, ViewChild } from "@angular/core";
+import {
+  Component,
+  EventEmitter,
+  Inject,
+  Input,
+  OnDestroy,
+  OnInit,
+  Output,
+  ViewChild,
+} from "@angular/core";
 import { FormBuilder, Validators } from "@angular/forms";
 import { Router } from "@angular/router";
 import { Subject, takeUntil } from "rxjs";
@@ -69,7 +78,7 @@ interface OnSuccessArgs {
 @Component({
   templateUrl: "./change-plan-dialog.component.html",
 })
-export class ChangePlanDialogComponent implements OnInit {
+export class ChangePlanDialogComponent implements OnInit, OnDestroy {
   @ViewChild(PaymentComponent) paymentComponent: PaymentComponent;
   @ViewChild(TaxInfoComponent) taxComponent: TaxInfoComponent;
 

apps/web/src/app/billing/shared/tax-info.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
 import { FormControl, FormGroup, Validators } from "@angular/forms";
 import { ActivatedRoute } from "@angular/router";
 import { Subject, takeUntil } from "rxjs";
@@ -31,7 +31,7 @@ type CountryList = {
   imports: [SharedModule],
 })
 // eslint-disable-next-line rxjs-angular/prefer-takeuntil
-export class TaxInfoComponent {
+export class TaxInfoComponent implements OnInit {
   @Input() trialFlow = false;
   @Output() onCountryChanged = new EventEmitter();
   private destroy$ = new Subject<void>();

apps/web/src/app/secrets-manager/secrets-manager-landing/sm-landing.component.ts

@@ -1,4 +1,4 @@
-import { Component } from "@angular/core";
+import { Component, OnInit } from "@angular/core";
 
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
@@ -13,7 +13,7 @@ import { SharedModule } from "../../shared/shared.module";
   imports: [SharedModule, SearchModule, NoItemsModule, HeaderModule],
   templateUrl: "sm-landing.component.html",
 })
-export class SMLandingComponent {
+export class SMLandingComponent implements OnInit {
   tryItNowUrl: string;
   learnMoreUrl: string = "https://bitwarden.com/help/secrets-manager-overview/";
   imageSrc: string = "../images/sm.webp";

apps/web/src/app/settings/preferences.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnDestroy, OnInit } from "@angular/core";
 import { FormBuilder } from "@angular/forms";
 import { concatMap, filter, firstValueFrom, map, Observable, Subject, takeUntil, tap } from "rxjs";
 
@@ -24,7 +24,7 @@ import { DialogService } from "@bitwarden/components";
   selector: "app-preferences",
   templateUrl: "preferences.component.html",
 })
-export class PreferencesComponent implements OnInit {
+export class PreferencesComponent implements OnInit, OnDestroy {
   // For use in template
   protected readonly VaultTimeoutAction = VaultTimeoutAction;
 

apps/web/src/app/tools/send/send-access-password.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from "@angular/core";
 import { FormBuilder, Validators } from "@angular/forms";
 import { Subject, takeUntil } from "rxjs";
 
@@ -10,7 +10,7 @@ import { SharedModule } from "../../shared";
   imports: [SharedModule],
   standalone: true,
 })
-export class SendAccessPasswordComponent {
+export class SendAccessPasswordComponent implements OnInit, OnDestroy {
   private destroy$ = new Subject<void>();
   protected formGroup = this.formBuilder.group({
     password: ["", [Validators.required]],

apps/web/src/app/tools/send/send.component.ts

@@ -1,4 +1,4 @@
-import { Component, NgZone, ViewChild, ViewContainerRef } from "@angular/core";
+import { Component, NgZone, ViewChild, OnInit, OnDestroy, ViewContainerRef } from "@angular/core";
 import { lastValueFrom } from "rxjs";
 
 import { SendComponent as BaseSendComponent } from "@bitwarden/angular/tools/send/send.component";
@@ -34,7 +34,7 @@ const BroadcasterSubscriptionId = "SendComponent";
   imports: [SharedModule, SearchModule, NoItemsModule, HeaderModule],
   templateUrl: "send.component.html",
 })
-export class SendComponent extends BaseSendComponent {
+export class SendComponent extends BaseSendComponent implements OnInit, OnDestroy {
   @ViewChild("sendAddEdit", { read: ViewContainerRef, static: true })
   sendAddEditModalRef: ViewContainerRef;
   noItemIcon = NoSendsIcon;

apps/web/src/app/vault/individual-vault/bulk-action-dialogs/bulk-share-dialog/bulk-share-dialog.component.ts

@@ -1,5 +1,5 @@
 import { DialogConfig, DialogRef, DIALOG_DATA } from "@angular/cdk/dialog";
-import { Component, Inject, OnInit } from "@angular/core";
+import { Component, Inject, OnDestroy, OnInit } from "@angular/core";
 
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
@@ -41,7 +41,7 @@ export const openBulkShareDialog = (
 @Component({
   templateUrl: "bulk-share-dialog.component.html",
 })
-export class BulkShareDialogComponent implements OnInit {
+export class BulkShareDialogComponent implements OnInit, OnDestroy {
   ciphers: CipherView[] = [];
   organizationId: string;
 

apps/web/src/app/vault/org-vault/vault-filter/vault-filter.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnDestroy, OnInit, SimpleChanges } from "@angular/core";
+import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from "@angular/core";
 import { firstValueFrom, Subject } from "rxjs";
 
 import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
@@ -20,7 +20,10 @@ import { CollectionFilter } from "../../individual-vault/vault-filter/shared/mod
   selector: "app-organization-vault-filter",
   templateUrl: "../../individual-vault/vault-filter/components/vault-filter.component.html",
 })
-export class VaultFilterComponent extends BaseVaultFilterComponent implements OnInit, OnDestroy {
+export class VaultFilterComponent
+  extends BaseVaultFilterComponent
+  implements OnInit, OnDestroy, OnChanges
+{
   @Input() set organization(value: Organization) {
     if (value && value !== this._organization) {
       this._organization = value;

bitwarden_license/bit-web/src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component } from "@angular/core";
+import { Component, OnInit } from "@angular/core";
 
 import { AppComponent as BaseAppComponent } from "@bitwarden/web-vault/app/app.component";
 
@@ -10,7 +10,7 @@ import { MaximumVaultTimeoutPolicy } from "./admin-console/policies/maximum-vaul
   selector: "app-root",
   templateUrl: "../../../../apps/web/src/app/app.component.html",
 })
-export class AppComponent extends BaseAppComponent {
+export class AppComponent extends BaseAppComponent implements OnInit {
   ngOnInit() {
     super.ngOnInit();
 

bitwarden_license/bit-web/src/app/billing/providers/subscription/provider-subscription.component.ts

@@ -1,4 +1,4 @@
-import { Component } from "@angular/core";
+import { Component, OnDestroy, OnInit } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
 import { Subject, concatMap, takeUntil } from "rxjs";
 
@@ -16,7 +16,7 @@ import { ToastService } from "@bitwarden/components";
   selector: "app-provider-subscription",
   templateUrl: "./provider-subscription.component.html",
 })
-export class ProviderSubscriptionComponent {
+export class ProviderSubscriptionComponent implements OnInit, OnDestroy {
   providerId: string;
   subscription: ProviderSubscriptionResponse;
 

bitwarden_license/bit-web/src/app/secrets-manager/projects/project/project-secrets.component.ts

@@ -1,4 +1,4 @@
-import { Component } from "@angular/core";
+import { Component, OnInit } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
 import { combineLatest, combineLatestWith, filter, Observable, startWith, switchMap } from "rxjs";
 
@@ -31,7 +31,7 @@ import { ProjectService } from "../project.service";
   selector: "sm-project-secrets",
   templateUrl: "./project-secrets.component.html",
 })
-export class ProjectSecretsComponent {
+export class ProjectSecretsComponent implements OnInit {
   secrets$: Observable<SecretListView[]>;
 
   private organizationId: string;

bitwarden_license/bit-web/src/app/secrets-manager/secrets/dialog/secret-dialog.component.ts

@@ -1,5 +1,5 @@
 import { DialogRef, DIALOG_DATA } from "@angular/cdk/dialog";
-import { ChangeDetectorRef, Component, Inject, OnInit } from "@angular/core";
+import { ChangeDetectorRef, Component, Inject, OnDestroy, OnInit } from "@angular/core";
 import { FormControl, FormGroup, Validators } from "@angular/forms";
 import { lastValueFrom, Subject, takeUntil } from "rxjs";
 
@@ -54,7 +54,7 @@ export interface SecretOperation {
 @Component({
   templateUrl: "./secret-dialog.component.html",
 })
-export class SecretDialogComponent implements OnInit {
+export class SecretDialogComponent implements OnInit, OnDestroy {
   loading = true;
   projects: ProjectListView[];
   addNewProject = false;

bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/dialog/service-account-dialog.component.ts

@@ -1,5 +1,5 @@
 import { DialogRef, DIALOG_DATA } from "@angular/cdk/dialog";
-import { Component, Inject } from "@angular/core";
+import { Component, Inject, OnInit } from "@angular/core";
 import { FormControl, FormGroup, Validators } from "@angular/forms";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
@@ -24,7 +24,7 @@ export interface ServiceAccountOperation {
 @Component({
   templateUrl: "./service-account-dialog.component.html",
 })
-export class ServiceAccountDialogComponent {
+export class ServiceAccountDialogComponent implements OnInit {
   protected formGroup = new FormGroup(
     {
       name: new FormControl("", {

bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/event-logs/service-accounts-events.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnDestroy } from "@angular/core";
+import { Component, OnDestroy, OnInit } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
 import { Subject, takeUntil } from "rxjs";
 
@@ -16,7 +16,10 @@ import { ServiceAccountEventLogApiService } from "./service-account-event-log-ap
   selector: "sm-service-accounts-events",
   templateUrl: "./service-accounts-events.component.html",
 })
-export class ServiceAccountEventsComponent extends BaseEventsComponent implements OnDestroy {
+export class ServiceAccountEventsComponent
+  extends BaseEventsComponent
+  implements OnInit, OnDestroy
+{
   exportFileName = "machine-account-events";
   private destroy$ = new Subject<void>();
   private serviceAccountId: string;

libs/angular/src/auth/components/set-password.component.ts

@@ -1,4 +1,4 @@
-import { Directive } from "@angular/core";
+import { Directive, OnInit } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
 import { firstValueFrom, of } from "rxjs";
 import { filter, first, switchMap, tap } from "rxjs/operators";
@@ -37,7 +37,7 @@ import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legac
 import { ChangePasswordComponent as BaseChangePasswordComponent } from "./change-password.component";
 
 @Directive()
-export class SetPasswordComponent extends BaseChangePasswordComponent {
+export class SetPasswordComponent extends BaseChangePasswordComponent implements OnInit {
   syncLoading = true;
   showPassword = false;
   hint = "";

libs/angular/src/auth/components/sso.component.ts

@@ -1,4 +1,4 @@
-import { Directive } from "@angular/core";
+import { Directive, OnInit } from "@angular/core";
 import { ActivatedRoute, NavigationExtras, Router } from "@angular/router";
 import { firstValueFrom } from "rxjs";
 import { first } from "rxjs/operators";
@@ -29,7 +29,7 @@ import { Utils } from "@bitwarden/common/platform/misc/utils";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";
 
 @Directive()
-export class SsoComponent {
+export class SsoComponent implements OnInit {
   identifier: string;
   loggingIn = false;
 

libs/angular/src/auth/components/two-factor-auth/two-factor-auth-duo.component.ts

@@ -1,6 +1,6 @@
 import { DialogModule } from "@angular/cdk/dialog";
 import { CommonModule } from "@angular/common";
-import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
 import { ReactiveFormsModule, FormsModule } from "@angular/forms";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
@@ -34,7 +34,7 @@ import {
   ],
   providers: [I18nPipe],
 })
-export class TwoFactorAuthDuoComponent {
+export class TwoFactorAuthDuoComponent implements OnInit {
   @Output() token = new EventEmitter<string>();
   @Input() providerData: any;
 

libs/angular/src/auth/components/two-factor-auth/two-factor-auth-email.component.ts

@@ -1,6 +1,6 @@
 import { DialogModule } from "@angular/cdk/dialog";
 import { CommonModule } from "@angular/common";
-import { Component, EventEmitter, Output } from "@angular/core";
+import { Component, EventEmitter, OnInit, Output } from "@angular/core";
 import { ReactiveFormsModule, FormsModule } from "@angular/forms";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
@@ -40,7 +40,7 @@ import {
   ],
   providers: [I18nPipe],
 })
-export class TwoFactorAuthEmailComponent {
+export class TwoFactorAuthEmailComponent implements OnInit {
   @Output() token = new EventEmitter<string>();
 
   twoFactorEmail: string = null;

libs/angular/src/auth/components/two-factor-auth/two-factor-auth-webauthn.component.ts

@@ -1,6 +1,6 @@
 import { DialogModule } from "@angular/cdk/dialog";
 import { CommonModule } from "@angular/common";
-import { Component, EventEmitter, Inject, Output } from "@angular/core";
+import { Component, EventEmitter, Inject, OnDestroy, OnInit, Output } from "@angular/core";
 import { ReactiveFormsModule, FormsModule } from "@angular/forms";
 import { ActivatedRoute } from "@angular/router";
 import { firstValueFrom } from "rxjs";
@@ -41,7 +41,7 @@ import {
   ],
   providers: [I18nPipe],
 })
-export class TwoFactorAuthWebAuthnComponent {
+export class TwoFactorAuthWebAuthnComponent implements OnInit, OnDestroy {
   @Output() token = new EventEmitter<string>();
 
   webAuthnReady = false;

libs/angular/src/auth/components/update-temp-password.component.ts

@@ -1,4 +1,4 @@
-import { Directive } from "@angular/core";
+import { Directive, OnInit } from "@angular/core";
 import { Router } from "@angular/router";
 import { firstValueFrom, map } from "rxjs";
 
@@ -30,7 +30,7 @@ import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legac
 import { ChangePasswordComponent as BaseChangePasswordComponent } from "./change-password.component";
 
 @Directive()
-export class UpdateTempPasswordComponent extends BaseChangePasswordComponent {
+export class UpdateTempPasswordComponent extends BaseChangePasswordComponent implements OnInit {
   hint: string;
   key: string;
   enforcedPolicyOptions: MasterPasswordPolicyOptions;

libs/angular/src/directives/input-verbatim.directive.ts

@@ -1,9 +1,9 @@
-import { Directive, ElementRef, Input, Renderer2 } from "@angular/core";
+import { Directive, ElementRef, Input, OnInit, Renderer2 } from "@angular/core";
 
 @Directive({
   selector: "[appInputVerbatim]",
 })
-export class InputVerbatimDirective {
+export class InputVerbatimDirective implements OnInit {
   @Input() set appInputVerbatim(condition: boolean | string) {
     this.disableComplete = condition === "" || condition === true;
   }

libs/components/src/form-field/suffix.directive.ts

@@ -1,4 +1,4 @@
-import { Directive, HostBinding, Input, Optional } from "@angular/core";
+import { Directive, HostBinding, Input, OnInit, Optional } from "@angular/core";
 
 import { ButtonLikeAbstraction } from "../shared/button-like.abstraction";
 
@@ -7,7 +7,7 @@ import { PrefixButtonClasses, PrefixClasses, PrefixStaticContentClasses } from "
 @Directive({
   selector: "[bitSuffix]",
 })
-export class BitSuffixDirective {
+export class BitSuffixDirective implements OnInit {
   constructor(@Optional() private buttonComponent: ButtonLikeAbstraction) {}
 
   @HostBinding("class") @Input() get classList() {

libs/components/src/input/autofocus.directive.ts

@@ -1,4 +1,4 @@
-import { Directive, ElementRef, Input, NgZone, Optional } from "@angular/core";
+import { Directive, ElementRef, Input, NgZone, OnInit, Optional } from "@angular/core";
 import { take } from "rxjs/operators";
 
 import { Utils } from "@bitwarden/common/platform/misc/utils";
@@ -16,7 +16,7 @@ import { FocusableElement } from "../shared/focusable-element";
 @Directive({
   selector: "[appAutofocus], [bitAutofocus]",
 })
-export class AutofocusDirective {
+export class AutofocusDirective implements OnInit {
   @Input() set appAutofocus(condition: boolean | string) {
     this.autofocus = condition === "" || condition === true;
   }

libs/importer/src/components/import.component.ts

@@ -1,5 +1,6 @@
 import { CommonModule } from "@angular/common";
 import {
+  AfterViewInit,
   Component,
   EventEmitter,
   Inject,
@@ -115,7 +116,7 @@ const safeProviders: SafeProvider[] = [
   ],
   providers: safeProviders,
 })
-export class ImportComponent implements OnInit, OnDestroy {
+export class ImportComponent implements OnInit, OnDestroy, AfterViewInit {
   featuredImportOptions: ImportOption[];
   importOptions: ImportOption[];
   format: ImportType = null;

libs/tools/export/vault-export/vault-export-ui/src/components/export.component.ts

@@ -1,5 +1,6 @@
 import { CommonModule } from "@angular/common";
 import {
+  AfterViewInit,
   Component,
   EventEmitter,
   Input,
@@ -63,7 +64,7 @@ import { ExportScopeCalloutComponent } from "./export-scope-callout.component";
     PasswordStrengthV2Component,
   ],
 })
-export class ExportComponent implements OnInit, OnDestroy {
+export class ExportComponent implements OnInit, OnDestroy, AfterViewInit {
   private _organizationId: string;
 
   get organizationId(): string {

libs/vault/src/cipher-view/cipher-view.component.ts

@@ -1,5 +1,5 @@
 import { CommonModule } from "@angular/common";
-import { Component, Input, OnInit } from "@angular/core";
+import { Component, Input, OnDestroy, OnInit } from "@angular/core";
 import { Observable, Subject, takeUntil } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
@@ -45,7 +45,7 @@ import { ViewIdentitySectionsComponent } from "./view-identity-sections/view-ide
     ViewIdentitySectionsComponent,
   ],
 })
-export class CipherViewComponent implements OnInit {
+export class CipherViewComponent implements OnInit, OnDestroy {
   @Input() cipher: CipherView;
   organization$: Observable<Organization>;
   folder$: Observable<FolderView>;

libs/vault/src/components/assign-collections.component.ts

@@ -1,5 +1,14 @@
 import { CommonModule } from "@angular/common";
-import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from "@angular/core";
+import {
+  AfterViewInit,
+  Component,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  OnInit,
+  Output,
+  ViewChild,
+} from "@angular/core";
 import { FormBuilder, ReactiveFormsModule, Validators } from "@angular/forms";
 import {
   Observable,
@@ -80,7 +89,7 @@ const MY_VAULT_ID = "MyVault";
     DialogModule,
   ],
 })
-export class AssignCollectionsComponent implements OnInit {
+export class AssignCollectionsComponent implements OnInit, OnDestroy, AfterViewInit {
   @ViewChild(BitSubmitDirective)
   private bitSubmit: BitSubmitDirective;