diff --git a/src/app/authoring-tool/add-component/choose-new-component/choose-new-component.component.html b/src/app/authoring-tool/add-component/choose-new-component/choose-new-component.component.html
index e89faf44838..62c7998d3c1 100644
--- a/src/app/authoring-tool/add-component/choose-new-component/choose-new-component.component.html
+++ b/src/app/authoring-tool/add-component/choose-new-component/choose-new-component.component.html
@@ -7,12 +7,12 @@ <h2 mat-dialog-title i18n>Add New Component</h2>
     </button>
   </p>
   <div fxLayout="row wrap" fxLayoutAlign="start center">
-    <ng-container *ngFor="let componentType of componentTypes">
+    @for (componentType of componentTypes; track componentType.type) {
       <component-type-button
         [componentType]="componentType.type"
         (componentSelectedEvent)="selectComponent(componentType.type)"
       />
-    </ng-container>
+    }
   </div>
 </mat-dialog-content>
 <mat-dialog-actions fxLayoutAlign="end center">
diff --git a/src/app/authoring-tool/add-component/choose-new-component/choose-new-component.component.ts b/src/app/authoring-tool/add-component/choose-new-component/choose-new-component.component.ts
index 5921d57c379..a5ad56eb0fb 100644
--- a/src/app/authoring-tool/add-component/choose-new-component/choose-new-component.component.ts
+++ b/src/app/authoring-tool/add-component/choose-new-component/choose-new-component.component.ts
@@ -1,14 +1,25 @@
 import { Component } from '@angular/core';
 import { ComponentTypeService } from '../../../../assets/wise5/services/componentTypeService';
-import { MatDialogRef } from '@angular/material/dialog';
+import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { CommonModule } from '@angular/common';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { MatButtonModule } from '@angular/material/button';
+import { ComponentTypeButtonComponent } from '../../../../assets/wise5/authoringTool/components/component-type-button/component-type-button.component';
 
 @Component({
-  selector: 'choose-new-component',
-  styleUrls: ['./choose-new-component.component.scss'],
+  imports: [
+    CommonModule,
+    ComponentTypeButtonComponent,
+    FlexLayoutModule,
+    MatButtonModule,
+    MatDialogModule
+  ],
+  standalone: true,
+  styleUrl: './choose-new-component.component.scss',
   templateUrl: 'choose-new-component.component.html'
 })
 export class ChooseNewComponent {
-  componentTypes: any[];
+  protected componentTypes: any[];
 
   constructor(
     private componentTypeService: ComponentTypeService,
diff --git a/src/app/teacher/authoring-tool.module.ts b/src/app/teacher/authoring-tool.module.ts
index 9d6f96d6311..2cb23c4ad95 100644
--- a/src/app/teacher/authoring-tool.module.ts
+++ b/src/app/teacher/authoring-tool.module.ts
@@ -46,7 +46,6 @@ import { ProjectAuthoringParentComponent } from '../../assets/wise5/authoringToo
 import { ChooseImportUnitComponent } from '../authoring-tool/import-step/choose-import-unit/choose-import-unit.component';
 import { NodeAuthoringParentComponent } from '../../assets/wise5/authoringTool/node/node-authoring-parent/node-authoring-parent.component';
 import { AddLessonChooseTemplateComponent } from '../../assets/wise5/authoringTool/addLesson/add-lesson-choose-template/add-lesson-choose-template.component';
-import { ComponentTypeButtonComponent } from '../../assets/wise5/authoringTool/components/component-type-button/component-type-button.component';
 import { EditNodeTitleComponent } from '../../assets/wise5/authoringTool/node/edit-node-title/edit-node-title.component';
 import { AddComponentButtonComponent } from '../../assets/wise5/authoringTool/node/add-component-button/add-component-button.component';
 import { CopyComponentButtonComponent } from '../../assets/wise5/authoringTool/node/copy-component-button/copy-component-button.component';
@@ -57,6 +56,7 @@ import { AddLessonButtonComponent } from '../../assets/wise5/authoringTool/add-l
 import { AddStepButtonComponent } from '../../assets/wise5/authoringTool/add-step-button/add-step-button.component';
 import { PreviewComponentButtonComponent } from '../../assets/wise5/authoringTool/components/preview-component-button/preview-component-button.component';
 import { StepToolsComponent } from '../../assets/wise5/common/stepTools/step-tools.component';
+import { ComponentTypeButtonComponent } from '../../assets/wise5/authoringTool/components/component-type-button/component-type-button.component';
 
 @NgModule({
   declarations: [
@@ -73,7 +73,6 @@ import { StepToolsComponent } from '../../assets/wise5/common/stepTools/step-too
     ChooseCopyNodeLocationComponent,
     ChooseImportStepComponent,
     ChooseImportUnitComponent,
-    ChooseNewComponent,
     ChooseMoveNodeLocationComponent,
     ChooseSimulationComponent,
     ConcurrentAuthorsMessageComponent,
@@ -104,6 +103,7 @@ import { StepToolsComponent } from '../../assets/wise5/common/stepTools/step-too
     AddStepButtonComponent,
     ChooseNewNodeTemplateComponent,
     StudentTeacherCommonModule,
+    ChooseNewComponent,
     ComponentAuthoringModule,
     ComponentStudentModule,
     ComponentTypeButtonComponent,