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

src/app/announcement/announcement.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output, ViewEncapsulation, Inject } from '@angular/core';
+import { Component, EventEmitter, Input, Output, ViewEncapsulation, inject } from '@angular/core';
 import { Announcement } from '../domain/announcement';
 import {
   MatDialogRef,
@@ -22,11 +22,11 @@ import { CdkScrollable } from '@angular/cdk/scrolling';
   templateUrl: './announcement.component.html'
 })
 export class AnnouncementComponent {
+  dialog = inject(MatDialog);
+
   @Input() announcement: Announcement = new Announcement();
   @Output() dismiss: EventEmitter<void> = new EventEmitter<void>();
 
-  constructor(public dialog: MatDialog) {}
-
   protected showAnnouncementDetails(): void {
     this.dialog.open(AnnouncementDialogComponent, {
       data: this.announcement,
@@ -48,8 +48,6 @@ export class AnnouncementComponent {
   templateUrl: 'announcement-dialog.component.html'
 })
 export class AnnouncementDialogComponent {
-  constructor(
-    public dialogRef: MatDialogRef<AnnouncementDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: Announcement
-  ) {}
+  dialogRef = inject<MatDialogRef<AnnouncementDialogComponent>>(MatDialogRef);
+  data = inject<Announcement>(MAT_DIALOG_DATA);
 }

src/app/authoring-tool/add-component/choose-new-component/choose-new-component.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { ComponentTypeButtonComponent } from '../../../../assets/wise5/authoringTool/components/component-type-button/component-type-button.component';
@@ -10,12 +10,10 @@ import { ComponentTypeService } from '../../../../assets/wise5/services/componen
   templateUrl: 'choose-new-component.component.html'
 })
 export class ChooseNewComponent {
-  protected componentTypes: any[];
+  private componentTypeService = inject(ComponentTypeService);
+  private dialogRef = inject(MatDialogRef<ChooseNewComponent>);
 
-  constructor(
-    private componentTypeService: ComponentTypeService,
-    private dialogRef: MatDialogRef<ChooseNewComponent>
-  ) {}
+  protected componentTypes: any[];
 
   ngOnInit(): void {
     this.componentTypes = this.componentTypeService.getComponentTypes();

src/app/authoring-tool/edit-advanced-component/edit-advanced-component.component.ts

@@ -1,4 +1,4 @@
-import { Directive, Input } from '@angular/core';
+import { Directive, inject, Input } from '@angular/core';
 import { ComponentContent } from '../../../assets/wise5/common/ComponentContent';
 import { Component } from '../../../assets/wise5/common/Component';
 import { NotebookService } from '../../../assets/wise5/services/notebookService';
@@ -8,17 +8,15 @@ import { moveObjectDown, moveObjectUp } from '../../../assets/wise5/common/array
 
 @Directive()
 export abstract class EditAdvancedComponentComponent {
+  protected nodeService = inject(TeacherNodeService);
+  protected notebookService = inject(NotebookService);
+  protected teacherProjectService = inject(TeacherProjectService);
+
   component: Component;
   componentContent: ComponentContent;
   @Input() componentId: string;
   @Input() nodeId: string;
 
-  constructor(
-    protected nodeService: TeacherNodeService,
-    protected notebookService: NotebookService,
-    protected teacherProjectService: TeacherProjectService
-  ) {}
-
   ngOnInit(): void {
     this.componentContent = this.teacherProjectService.getComponent(this.nodeId, this.componentId);
     this.component = new Component(this.componentContent, this.nodeId);

src/app/authoring-tool/edit-advanced-component/edit-component-default-feedback/edit-component-default-feedback.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, inject } from '@angular/core';
 import { Subject, Subscription } from 'rxjs';
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import { TeacherProjectService } from '../../../../assets/wise5/services/teacherProjectService';
@@ -24,12 +24,12 @@ import { MatFormFieldModule } from '@angular/material/form-field';
   templateUrl: 'edit-component-default-feedback.component.html'
 })
 export class EditComponentDefaultFeedback {
+  private projectService = inject(TeacherProjectService);
+
   @Input() componentContent: any;
   protected feedbackChanged: Subject<string> = new Subject<string>();
   private feedbackChangedSubscription: Subscription;
 
-  constructor(private projectService: TeacherProjectService) {}
-
   ngOnInit(): void {
     this.feedbackChangedSubscription = this.feedbackChanged
       .pipe(debounceTime(1000), distinctUntilChanged())

src/app/authoring-tool/edit-common-advanced/edit-common-advanced.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, inject } from '@angular/core';
 import { Component as WISEComponent } from '../../../assets/wise5/common/Component';
 import { TeacherProjectService } from '../../../assets/wise5/services/teacherProjectService';
 import { EditConnectedComponentsComponent } from '../edit-connected-components/edit-connected-components.component';
@@ -33,11 +33,11 @@ import { EditComponentConstraintsComponent } from '../edit-component-constraints
   templateUrl: './edit-common-advanced.component.html'
 })
 export class EditCommonAdvancedComponent {
+  protected projectService = inject(TeacherProjectService);
+
   @Input() allowedConnectedComponentTypes: string[] = [];
   @Input() component: WISEComponent;
 
-  constructor(protected projectService: TeacherProjectService) {}
-
   protected connectedComponentsChanged(connectedComponents: any[]): void {
     this.component.content.connectedComponents = connectedComponents;
     this.projectService.nodeChanged();

src/app/authoring-tool/edit-component-advanced/edit-component-advanced.component.ts

@@ -5,8 +5,8 @@ import {
   createComponent,
   ElementRef,
   EnvironmentInjector,
-  Inject,
-  ViewChild
+  ViewChild,
+  inject
 } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
@@ -22,13 +22,12 @@ import { components } from '../../../assets/wise5/components/Components';
   templateUrl: './edit-component-advanced.component.html'
 })
 export class EditComponentAdvancedComponent {
+  private applicationRef = inject(ApplicationRef);
+  protected component = inject<WISEComponent>(MAT_DIALOG_DATA);
+  private injector = inject(EnvironmentInjector);
+
   @ViewChild('component') private componentElementRef: ElementRef;
   private componentRef: ComponentRef<WISEComponent>;
-  constructor(
-    private applicationRef: ApplicationRef,
-    @Inject(MAT_DIALOG_DATA) protected component: WISEComponent,
-    private injector: EnvironmentInjector
-  ) {}
 
   ngAfterViewInit(): void {
     this.componentRef = createComponent(components[this.component.content.type].authoringAdvanced, {

src/app/authoring-tool/edit-component-field.component.ts

@@ -1,16 +1,16 @@
-import { Directive, Input } from '@angular/core';
+import { Directive, inject, Input } from '@angular/core';
 import { Subject, Subscription } from 'rxjs';
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import { TeacherProjectService } from '../../assets/wise5/services/teacherProjectService';
 
 @Directive()
 export abstract class EditComponentFieldComponent {
+  private projectService = inject(TeacherProjectService);
+
   @Input() componentContent: any;
   protected inputChanged: Subject<any> = new Subject<any>();
   protected inputChangedSubscription: Subscription;
 
-  constructor(private projectService: TeacherProjectService) {}
-
   ngOnInit(): void {
     this.inputChangedSubscription = this.inputChanged
       .pipe(debounceTime(1000), distinctUntilChanged())

src/app/authoring-tool/edit-component-json/edit-component-json.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, inject, Input } from '@angular/core';
 import { Subject, Subscription } from 'rxjs';
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import { NotificationService } from '../../../assets/wise5/services/notificationService';
@@ -27,18 +27,16 @@ import { MatButtonModule } from '@angular/material/button';
   templateUrl: 'edit-component-json.component.html'
 })
 export class EditComponentJsonComponent {
+  private notificationService = inject(NotificationService);
+  private projectService = inject(TeacherProjectService);
+
   @Input() component: WISEComponent;
   protected componentContentJSONString: string;
   protected jsonChanged: Subject<string> = new Subject<string>();
   protected showJSONAuthoring: boolean = false;
   private subscriptions: Subscription = new Subscription();
   private validComponentContentJSONString: string;
 
-  constructor(
-    private notificationService: NotificationService,
-    private projectService: TeacherProjectService
-  ) {}
-
   ngOnInit(): void {
     this.setComponentContentJsonString();
     this.subscriptions.add(

src/app/authoring-tool/edit-component-peer-grouping-tag/edit-component-peer-grouping-tag.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, inject } from '@angular/core';
 import { TeacherProjectService } from '../../../assets/wise5/services/teacherProjectService';
 import { SelectPeerGroupingAuthoringComponent } from '../../../assets/wise5/authoringTool/peer-grouping/select-peer-grouping-authoring/select-peer-grouping-authoring.component';
 
@@ -11,9 +11,9 @@ import { SelectPeerGroupingAuthoringComponent } from '../../../assets/wise5/auth
   />`
 })
 export class EditComponentPeerGroupingTagComponent {
-  @Input() componentContent: any;
+  private projectService = inject(TeacherProjectService);
 
-  constructor(private projectService: TeacherProjectService) {}
+  @Input() componentContent: any;
 
   peerGroupingTagChanged(tag: string): void {
     this.componentContent.peerGroupingTag = tag;

src/app/authoring-tool/edit-component-rubric/edit-component-rubric.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, inject } from '@angular/core';
 import { TeacherProjectService } from '../../../assets/wise5/services/teacherProjectService';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
@@ -21,11 +21,11 @@ import { MatFormFieldModule } from '@angular/material/form-field';
   templateUrl: 'edit-component-rubric.component.html'
 })
 export class EditComponentRubricComponent {
+  private projectService = inject(TeacherProjectService);
+
   @Input() componentContent: any;
   protected showRubricAuthoring: boolean;
 
-  constructor(private projectService: TeacherProjectService) {}
-
   protected save(): void {
     this.projectService.componentChanged();
   }

src/app/authoring-tool/edit-component-tags/edit-component-tags.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, inject } from '@angular/core';
 import { Subject, Subscription } from 'rxjs';
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import { TeacherProjectService } from '../../../assets/wise5/services/teacherProjectService';
@@ -36,12 +36,12 @@ import { MatFormFieldModule } from '@angular/material/form-field';
   templateUrl: 'edit-component-tags.component.html'
 })
 export class EditComponentTagsComponent {
+  private projectService = inject(TeacherProjectService);
+
   @Input() componentContent: any;
   protected tagChanged: Subject<any> = new Subject<any>();
   private tagChangedSubscription: Subscription;
 
-  constructor(private projectService: TeacherProjectService) {}
-
   ngOnInit(): void {
     this.tagChangedSubscription = this.tagChanged
       .pipe(debounceTime(1000), distinctUntilChanged())

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/authoring-tool/edit-question-bank/edit-question-bank.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, inject } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatCheckbox, MatCheckboxChange } from '@angular/material/checkbox';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -27,13 +27,13 @@ import { SelectStepAndComponentComponent } from '../select-step-and-component/se
   templateUrl: './edit-question-bank.component.html'
 })
 export class EditQuestionBankComponent implements OnInit {
+  private projectService = inject(TeacherProjectService);
+
   protected allowedReferenceComponentTypes: string[] = ['MultipleChoice', 'OpenResponse'];
   @Input() componentContent: any;
   protected inputChanged: Subject<string> = new Subject<string>();
   private subscriptions: Subscription = new Subscription();
 
-  constructor(private projectService: TeacherProjectService) {}
-
   ngOnInit(): void {
     this.subscriptions.add(
       this.inputChanged.pipe(debounceTime(1000), distinctUntilChanged()).subscribe(() => {

src/app/authoring-tool/import-step/choose-import-unit/choose-import-unit.component.ts

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatTabsModule } from '@angular/material/tabs';
@@ -16,19 +16,17 @@ import { AddStepTarget } from '../../../domain/addStepTarget';
   templateUrl: './choose-import-unit.component.html'
 })
 export class ChooseImportUnitComponent {
+  private configService = inject(ConfigService);
+  private projectLibraryService = inject(ProjectLibraryService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+
   protected importType: 'step' | 'component';
   protected libraryProjects: any[];
   protected myProjects: any[];
   private subscriptions: Subscription = new Subscription();
   protected target: AddStepTarget;
 
-  constructor(
-    private configService: ConfigService,
-    private projectLibraryService: ProjectLibraryService,
-    private route: ActivatedRoute,
-    private router: Router
-  ) {}
-
   ngOnInit(): void {
     this.importType = history.state.importType;
     this.target = history.state;

src/app/authoring-tool/select-component/select-component.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output, SimpleChanges } from '@angular/core';
+import { Component, EventEmitter, Input, Output, SimpleChanges, inject } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatSelectModule } from '@angular/material/select';
@@ -11,6 +11,8 @@ import { ComponentContent } from '../../../assets/wise5/common/ComponentContent'
   templateUrl: './select-component.component.html'
 })
 export class SelectComponentComponent {
+  private projectService = inject(ProjectService);
+
   @Input() allowedComponentTypes: string[] = [];
   @Output() componentChangedEvent: EventEmitter<string> = new EventEmitter<string>();
   @Input() componentId: string;
@@ -19,8 +21,6 @@ export class SelectComponentComponent {
   @Input() nodeId: string;
   @Input() thisComponentId: string;
 
-  constructor(private projectService: ProjectService) {}
-
   ngOnChanges(changes: SimpleChanges): void {
     if (changes.nodeId) {
       this.nodeId = changes.nodeId.currentValue;

src/app/authoring-tool/select-step-and-component/select-step-and-component.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
+import { ChangeDetectorRef, Component, EventEmitter, Input, Output, inject } from '@angular/core';
 import { ReferenceComponent } from '../../domain/referenceComponent';
 import { SelectStepComponent } from '../select-step/select-step.component';
 import { SelectComponentComponent } from '../select-component/select-component.component';
@@ -20,14 +20,14 @@ import { SelectComponentComponent } from '../select-component/select-component.c
     />`
 })
 export class SelectStepAndComponentComponent {
+  private changeDetector = inject(ChangeDetectorRef);
+
   @Input() allowedComponentTypes: string[] = [];
   @Output() componentChange: EventEmitter<ReferenceComponent> = new EventEmitter();
   @Input() referenceComponent: ReferenceComponent;
   @Output() stepChange: EventEmitter<ReferenceComponent> = new EventEmitter();
   @Input() thisComponentId: string;
 
-  constructor(private changeDetector: ChangeDetectorRef) {}
-
   protected stepChanged(nodeId: string): void {
     this.referenceComponent.nodeId = nodeId;
     this.changeDetector.detectChanges();