refactor(VLE): use inject() instead of constructor

src/app/authoring-tool/edit-connected-components-with-background/edit-connected-components-with-background.component.ts

@@ -1,17 +1,10 @@
 import { Component } from '@angular/core';
-import { ProjectService } from '../../../assets/wise5/services/projectService';
 import { EditConnectedComponentsComponent } from '../edit-connected-components/edit-connected-components.component';
 
-@Component({
-  template: ''
-})
+@Component({ template: ''}) // this class needs to be a component to extends parent class and be used as a base class 
 export class EditConnectedComponentsWithBackgroundComponent extends EditConnectedComponentsComponent {
   componentTypesThatCanImportWorkAsBackground: string[] = [];
 
-  constructor(protected projectService: ProjectService) {
-    super(projectService);
-  }
-
   canConnectedComponentTypeImportWorkAsBackground(connectedComponent: any): boolean {
     return this.componentTypesThatCanImportWorkAsBackground.includes(
       this.getConnectedComponentType(connectedComponent)

src/app/authoring-tool/edit-connected-components/edit-connected-components.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, inject, Input, OnInit, Output } from '@angular/core';
 import { ProjectService } from '../../../assets/wise5/services/projectService';
 import { EditConnectedComponentsAddButtonComponent } from '../edit-connected-components-add-button/edit-connected-components-add-button.component';
 import { EditConnectedComponentDefaultSelectsComponent } from '../edit-connected-component-default-selects/edit-connected-component-default-selects.component';
@@ -22,8 +22,7 @@ export class EditConnectedComponentsComponent implements OnInit {
   @Input() connectedComponents: any[] = [];
   @Output() connectedComponentsChanged: EventEmitter<any> = new EventEmitter();
   nodeIds: string[];
-
-  constructor(protected projectService: ProjectService) {}
+  protected projectService: ProjectService = inject(ProjectService);
 
   ngOnInit(): void {
     if (this.connectedComponents == null) {

src/app/common/edit-profile/edit-profile.component.ts

@@ -1,14 +1,12 @@
+import { inject } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { UnlinkGoogleAccountConfirmComponent } from '../../modules/shared/unlink-google-account-confirm/unlink-google-account-confirm.component';
 
 export abstract class EditProfileComponent {
   changed: boolean = false;
-
-  constructor(
-    public dialog: MatDialog,
-    public snackBar: MatSnackBar
-  ) {}
+  dialog = inject(MatDialog);
+  snackBar = inject(MatSnackBar);
 
   handleUpdateProfileResponse(response) {
     if (response.status === 'success') {

src/app/modules/library/library/library.component.ts

@@ -1,4 +1,4 @@
-import { OnInit, QueryList, ViewChildren, Directive } from '@angular/core';
+import { OnInit, QueryList, ViewChildren, Directive, inject } from '@angular/core';
 import { LibraryService } from '../../../services/library.service';
 import { LibraryProject } from '../libraryProject';
 import { PageEvent, MatPaginator } from '@angular/material/paginator';
@@ -18,10 +18,8 @@ export abstract class LibraryComponent implements OnInit {
   protected showFilters: boolean = false;
   protected subscriptions: Subscription = new Subscription();
 
-  constructor(
-    protected filterValues: ProjectFilterValues,
-    protected libraryService: LibraryService
-  ) {}
+  protected filterValues = inject(ProjectFilterValues);
+  protected libraryService = inject(LibraryService);
 
   ngOnInit(): void {
     this.subscriptions.add(this.filterValues.updated$.subscribe(() => this.filterUpdated()));

src/app/modules/library/personal-library/personal-library.component.ts

@@ -2,12 +2,11 @@ import { ApplyTagsButtonComponent } from '../../../teacher/apply-tags-button/app
 import { ArchiveProjectsButtonComponent } from '../../../teacher/archive-projects-button/archive-projects-button.component';
 import { ArchiveProjectService } from '../../../services/archive-project.service';
 import { BehaviorSubject } from 'rxjs';
-import { Component, Signal, WritableSignal, computed, signal } from '@angular/core';
+import { Component, Signal, WritableSignal, computed, inject, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { LibraryComponent } from '../library/library.component';
 import { LibraryProject } from '../libraryProject';
 import { LibraryProjectComponent } from '../library-project/library-project.component';
-import { LibraryService } from '../../../services/library.service';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
@@ -17,7 +16,6 @@ import { ProjectSelectionEvent } from '../../../domain/projectSelectionEvent';
 import { SelectAllItemsCheckboxComponent } from '../select-all-items-checkbox/select-all-items-checkbox.component';
 import { SelectTagsComponent } from '../../../teacher/select-tags/select-tags.component';
 import { Tag } from '../../../domain/tag';
-import { ProjectFilterValues } from '../../../domain/projectFilterValues';
 
 @Component({
   imports: [
@@ -54,13 +52,7 @@ export class PersonalLibraryComponent extends LibraryComponent {
   protected sharedProjects: LibraryProject[] = [];
   protected showArchivedView: boolean = false;
 
-  constructor(
-    private archiveProjectService: ArchiveProjectService,
-    protected filterValues: ProjectFilterValues,
-    protected libraryService: LibraryService
-  ) {
-    super(filterValues, libraryService);
-  }
+  private archiveProjectService = inject(ArchiveProjectService);
 
   ngOnInit(): void {
     super.ngOnInit();

src/app/modules/library/share-item-dialog/share-item-dialog.component.ts

@@ -1,4 +1,4 @@
-import { OnInit, Inject, Directive } from '@angular/core';
+import { OnInit, Directive, inject } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { TeacherService } from '../../../teacher/teacher.service';
@@ -10,6 +10,8 @@ import { copy } from '../../../../assets/wise5/common/object/object';
 
 @Directive()
 export abstract class ShareItemDialogComponent implements OnInit {
+  public data = inject(MAT_DIALOG_DATA);
+  public dialogRef = inject(MatDialogRef<ShareItemDialogComponent>);
   project: Project;
   projectId: number;
   runId: number;
@@ -19,19 +21,13 @@ export abstract class ShareItemDialogComponent implements OnInit {
   owner: any;
   sharedOwners: any[] = [];
   private sharedOwners$: BehaviorSubject<any[]> = new BehaviorSubject<any[]>(this.sharedOwners);
+  public snackBar = inject(MatSnackBar);
+  public teacherService = inject(TeacherService);
 
-  constructor(
-    public dialogRef: MatDialogRef<ShareItemDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: any,
-    public teacherService: TeacherService,
-    public snackBar: MatSnackBar
-  ) {
+  ngOnInit(): void {
     this.teacherService.retrieveAllTeacherUsernames().subscribe((teacherUsernames) => {
       this.allTeacherUsernames = teacherUsernames;
     });
-  }
-
-  ngOnInit() {
     this.filteredTeacherUsernames = this.teacherSearchControl.valueChanges.pipe(
       debounceTime(1000),
       map((value) => this._filter(value))

src/app/modules/library/share-project-dialog/share-project-dialog.component.ts

@@ -1,13 +1,10 @@
-import { Component, Inject } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import {
-  MAT_DIALOG_DATA,
-  MatDialogRef,
   MatDialogTitle,
   MatDialogContent,
   MatDialogActions,
   MatDialogClose
 } from '@angular/material/dialog';
-import { MatSnackBar } from '@angular/material/snack-bar';
 import {
   MatTableDataSource,
   MatTable,
@@ -21,7 +18,6 @@ import {
   MatRowDef,
   MatRow
 } from '@angular/material/table';
-import { TeacherService } from '../../../teacher/teacher.service';
 import { LibraryService } from '../../../services/library.service';
 import { ShareItemDialogComponent } from '../share-item-dialog/share-item-dialog.component';
 import { Project } from '../../../domain/project';
@@ -88,25 +84,16 @@ export class ShareProjectDialogComponent extends ShareItemDialogComponent {
   dataSource: MatTableDataSource<any[]> = new MatTableDataSource<any[]>();
   displayedColumns: string[] = ['name', 'permissions'];
   duplicate: boolean = false;
+  public libraryService = inject(LibraryService);
 
-  constructor(
-    public dialogRef: MatDialogRef<ShareItemDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: any,
-    public libraryService: LibraryService,
-    public teacherService: TeacherService,
-    public snackBar: MatSnackBar
-  ) {
-    super(dialogRef, data, teacherService, snackBar);
-    this.project = data.project;
-    this.projectId = data.project.id;
+  ngOnInit(): void {
+    super.ngOnInit();
+    this.project = this.data.project;
+    this.projectId = this.data.project.id;
     this.libraryService.getProjectInfo(this.projectId).subscribe((project: Project) => {
       this.project = project;
       this.populateSharedOwners(project.sharedOwners);
     });
-  }
-
-  ngOnInit() {
-    super.ngOnInit();
     this.getSharedOwners().subscribe((sharedOwners) => {
       let owners = [...sharedOwners];
       owners.reverse();

src/app/notebook/notebook-item/notebook-item.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Output, inject } from '@angular/core';
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { Subscription } from 'rxjs';
 import { DialogWithConfirmComponent } from '../../../assets/wise5/directives/dialog-with-confirm/dialog-with-confirm.component';
@@ -25,6 +25,11 @@ import { MatButtonModule } from '@angular/material/button';
   templateUrl: 'notebook-item.component.html'
 })
 export class NotebookItemComponent {
+  private configService = inject(ConfigService);
+  private dialog = inject(MatDialog);
+  private notebookService = inject(NotebookService);
+  private projectService = inject(ProjectService);
+
   protected canDelete: boolean;
   protected canRevive: boolean;
   protected color: string;
@@ -39,13 +44,6 @@ export class NotebookItemComponent {
   @Output() onSelect: EventEmitter<any> = new EventEmitter<any>();
   private type: string;
 
-  constructor(
-    private configService: ConfigService,
-    private dialog: MatDialog,
-    private notebookService: NotebookService,
-    private projectService: ProjectService
-  ) {}
-
   ngOnInit(): void {
     this.item = this.note;
     this.type = this.item ? this.item.type : null;

src/app/notebook/notebook-launcher/notebook-launcher.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, inject } from '@angular/core';
 import { NotebookService } from '../../../assets/wise5/services/notebookService';
 import { ProjectService } from '../../../assets/wise5/services/projectService';
 import { Subscription } from 'rxjs';
@@ -12,15 +12,13 @@ import { MatTooltipModule } from '@angular/material/tooltip';
   templateUrl: 'notebook-launcher.component.html'
 })
 export class NotebookLauncherComponent {
+  private notebookService = inject(NotebookService);
+  private projectService = inject(ProjectService);
+
   protected label: string = '';
   @Input() notebookConfig: any;
   private subscription: Subscription = new Subscription();
 
-  constructor(
-    private notebookService: NotebookService,
-    private projectService: ProjectService
-  ) {}
-
   ngOnInit(): void {
     this.setLabel();
     this.subscription.add(this.projectService.projectParsed$.subscribe(() => this.setLabel()));

src/app/notebook/notebook-notes/notebook-notes.component.ts

@@ -1,7 +1,5 @@
-import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { Component, Input, ViewEncapsulation, inject } from '@angular/core';
 import { Subscription } from 'rxjs';
-import { ConfigService } from '../../../assets/wise5/services/configService';
-import { NotebookService } from '../../../assets/wise5/services/notebookService';
 import { ProjectService } from '../../../assets/wise5/services/projectService';
 import { StudentDataService } from '../../../assets/wise5/services/studentDataService';
 import { NotebookParentComponent } from '../notebook-parent/notebook-parent.component';
@@ -31,6 +29,9 @@ import { MatIconModule } from '@angular/material/icon';
   encapsulation: ViewEncapsulation.None
 })
 export class NotebookNotesComponent extends NotebookParentComponent {
+  private dataService = inject(StudentDataService);
+  private projectService = inject(ProjectService);
+
   protected groups = [];
   private groupNameToGroup = {};
   protected hasPrivateNotes: boolean = false;
@@ -42,15 +43,6 @@ export class NotebookNotesComponent extends NotebookParentComponent {
   private subscriptions: Subscription = new Subscription();
   @Input() viewOnly: boolean;
 
-  constructor(
-    configService: ConfigService,
-    private dataService: StudentDataService,
-    NotebookService: NotebookService,
-    private projectService: ProjectService
-  ) {
-    super(configService, NotebookService);
-  }
-
   ngOnInit(): void {
     super.ngOnInit();
     this.setLabel();
@@ -59,7 +51,7 @@ export class NotebookNotesComponent extends NotebookParentComponent {
     this.hasPrivateNotes = this.isHasPrivateNotes();
 
     this.subscriptions.add(
-      this.NotebookService.notebookUpdated$.subscribe(({ notebookItem }) => {
+      this.notebookService.notebookUpdated$.subscribe(({ notebookItem }) => {
         if (
           (notebookItem.groups == null || notebookItem.groups.length === 0) &&
           notebookItem.type === 'note'
@@ -74,7 +66,7 @@ export class NotebookNotesComponent extends NotebookParentComponent {
     );
 
     this.subscriptions.add(
-      this.NotebookService.insertMode$.subscribe((args) => {
+      this.notebookService.insertMode$.subscribe((args) => {
         this.insertArgs = args;
         if (args.visibleSpace) {
           this.selectedTabIndex = args.visibleSpace === 'public' ? 1 : 0;
@@ -83,10 +75,10 @@ export class NotebookNotesComponent extends NotebookParentComponent {
     );
 
     this.subscriptions.add(
-      this.NotebookService.publicNotebookItemsRetrieved$.subscribe(() => {
+      this.notebookService.publicNotebookItemsRetrieved$.subscribe(() => {
         for (const group of this.groups) {
           if (group.name !== 'private') {
-            group.items = this.NotebookService.publicNotebookItems[group.name];
+            group.items = this.notebookService.publicNotebookItems[group.name];
           }
         }
       })
@@ -99,7 +91,7 @@ export class NotebookNotesComponent extends NotebookParentComponent {
       })
     );
 
-    this.NotebookService.retrievePublicNotebookItems('public');
+    this.notebookService.retrievePublicNotebookItems('public');
   }
 
   ngOnDestroy(): void {
@@ -209,20 +201,20 @@ export class NotebookNotesComponent extends NotebookParentComponent {
   }
 
   protected addNote(): void {
-    this.NotebookService.addNote(this.dataService.getCurrentNodeId());
+    this.notebookService.addNote(this.dataService.getCurrentNodeId());
   }
 
   protected select({ event, note }: any): void {
     if (this.insertArgs.insertMode) {
       this.insertArgs.notebookItem = note;
-      this.NotebookService.broadcastNotebookItemChosen(this.insertArgs);
+      this.notebookService.broadcastNotebookItemChosen(this.insertArgs);
     } else {
       const isEditMode = !this.viewOnly;
-      this.NotebookService.editNote(this.dataService.getCurrentNodeId(), note, isEditMode);
+      this.notebookService.editNote(this.dataService.getCurrentNodeId(), note, isEditMode);
     }
   }
 
   protected close(): void {
-    this.NotebookService.closeNotes();
+    this.notebookService.closeNotes();
   }
 }