WISE-Community · hirokiterashima · May 15, 2026 · May 20, 2026
diff --git a/src/app/authoring-tool/edit-component-advanced/edit-component-advanced.component.html b/src/app/authoring-tool/edit-component-advanced/edit-component-advanced.component.html
diff --git a/src/app/authoring-tool/edit-component-advanced/edit-component-advanced.component.spec.ts b/src/app/authoring-tool/edit-component-advanced/edit-component-advanced.component.spec.ts
@@ -1,5 +1,4 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { MockComponent, MockProviders } from 'ng-mocks';
 import { ComponentContent } from '../../../assets/wise5/common/ComponentContent';
 import { EditShowMyWorkAdvancedComponent } from '../../../assets/wise5/components/showMyWork/edit-show-my-work-advanced/edit-show-my-work-advanced.component';
@@ -9,6 +8,7 @@ import { TeacherNodeService } from '../../../assets/wise5/services/teacherNodeSe
 import { TeacherProjectService } from '../../../assets/wise5/services/teacherProjectService';
 import { EditComponentAdvancedComponent } from './edit-component-advanced.component';
 import { ComponentServiceLookupService } from '../../../assets/wise5/services/componentServiceLookupService';
+import { Component } from '../../../assets/wise5/common/Component';
 
 let component: EditComponentAdvancedComponent;
 let fixture: ComponentFixture<EditComponentAdvancedComponent>;
@@ -17,23 +17,6 @@ describe('EditComponentAdvancedComponent', () => {
     await TestBed.configureTestingModule({
       imports: [MockComponent(EditShowMyWorkAdvancedComponent), EditComponentAdvancedComponent],
       providers: [
-        {
-          provide: MAT_DIALOG_DATA,
-          useValue: {
-            component: {
-              content: { type: 'ShowMyWork' },
-              id: 'component1',
-              nodeId: 'node1'
-            },
-            tab: 'general'
-          }
-        },
-        {
-          provide: MatDialogRef,
-          useValue: {
-            close: () => {}
-          }
-        },
         MockProviders(
           ComponentServiceLookupService,
           TeacherNodeService,
@@ -46,6 +29,11 @@ describe('EditComponentAdvancedComponent', () => {
 
     fixture = TestBed.createComponent(EditComponentAdvancedComponent);
     component = fixture.componentInstance;
+    component.component = {
+      id: 'component1',
+      nodeId: 'node1',
+      content: { type: 'ShowMyWork' }
+    } as Component;
     spyOn(TestBed.inject(TeacherProjectService), 'getComponent').and.returnValue({
       type: 'ShowMyWork'
     } as ComponentContent);

diff --git a/src/app/authoring-tool/edit-component-advanced/edit-component-advanced.component.ts b/src/app/authoring-tool/edit-component-advanced/edit-component-advanced.component.ts
@@ -5,19 +5,20 @@ import {
   createComponent,
   ElementRef,
   EnvironmentInjector,
-  Inject,
+  Input,
   ViewChild,
   ViewEncapsulation
 } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
-import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import { MatDialogModule } from '@angular/material/dialog';
 import { MatDivider } from '@angular/material/divider';
 import { Component as WISEComponent } from '../../../assets/wise5/common/Component';
 import { components } from '../../../assets/wise5/components/Components';
 
 @Component({
   encapsulation: ViewEncapsulation.None,
   imports: [MatDivider, MatDialogModule, MatButtonModule],
+  selector: 'edit-component-advanced',
   styles: [
     `
       .edit-component-advanced {
@@ -39,29 +40,25 @@ import { components } from '../../../assets/wise5/components/Components';
       }
     `
   ],
-  templateUrl: './edit-component-advanced.component.html'
+  template: '<div #component></div>'
 })
 export class EditComponentAdvancedComponent {
+  @Input() component: WISEComponent;
   @ViewChild('component') private componentElementRef: ElementRef;
   private componentRef: ComponentRef<WISEComponent>;
   constructor(
     private applicationRef: ApplicationRef,
-    @Inject(MAT_DIALOG_DATA) protected data: { component: WISEComponent; tab?: string },
     private injector: EnvironmentInjector
   ) {}
 
   ngAfterViewInit(): void {
-    this.componentRef = createComponent(
-      components[this.data.component.content.type].authoringAdvanced,
-      {
-        hostElement: this.componentElementRef.nativeElement,
-        environmentInjector: this.injector
-      }
-    );
+    this.componentRef = createComponent(components[this.component.content.type].authoringAdvanced, {
+      hostElement: this.componentElementRef.nativeElement,
+      environmentInjector: this.injector
+    });
     Object.assign(this.componentRef.instance, {
-      nodeId: this.data.component.nodeId,
-      componentId: this.data.component.id,
-      tab: this.data.tab
+      nodeId: this.component.nodeId,
+      componentId: this.component.id
     });
     this.applicationRef.attachView(this.componentRef.hostView);
   }

diff --git a/src/app/authoring-tool/edit-component-field.component.ts b/src/app/authoring-tool/edit-component-field.component.ts
@@ -15,7 +15,7 @@ export abstract class EditComponentFieldComponent {
     this.inputChangedSubscription = this.inputChanged
       .pipe(debounceTime(1000), distinctUntilChanged())
       .subscribe(() => {
-        this.projectService.componentChanged();
+        this.projectService.saveProject();
       });
   }
 

diff --git a/src/app/authoring-tool/edit-component-json/edit-component-json.component.ts b/src/app/authoring-tool/edit-component-json/edit-component-json.component.ts
@@ -56,7 +56,7 @@ export class EditComponentJsonComponent {
       this.projectService
         .getNode(this.component.nodeId)
         .replaceComponent(this.component.id, JSON.parse(this.componentContentJSONString));
-      this.projectService.componentChanged();
+      this.projectService.saveProject();
       this.notificationService.showJSONValidMessage();
     } catch (e) {
       this.notificationService.showJSONInvalidMessage();

diff --git a/src/app/authoring-tool/edit-component-rubric/edit-component-rubric.component.ts b/src/app/authoring-tool/edit-component-rubric/edit-component-rubric.component.ts
@@ -17,6 +17,6 @@ export class EditComponentRubricComponent {
   constructor(private projectService: TeacherProjectService) {}
 
   protected save(): void {
-    this.projectService.componentChanged();
+    this.projectService.saveProject();
   }
 }
diff --git a/src/app/authoring-tool/edit-component-tags/edit-component-tags.component.ts b/src/app/authoring-tool/edit-component-tags/edit-component-tags.component.ts
@@ -47,7 +47,7 @@ export class EditComponentTagsComponent {
       .pipe(debounceTime(1000), distinctUntilChanged())
       .subscribe(({ tagIndex, tag }) => {
         this.componentContent.tags[tagIndex] = tag;
-        this.projectService.componentChanged();
+        this.projectService.saveProject();
       });
   }
 
@@ -60,15 +60,15 @@ export class EditComponentTagsComponent {
       this.componentContent.tags = [];
     }
     this.componentContent.tags.push('');
-    this.projectService.componentChanged();
+    this.projectService.saveProject();
   }
 
   moveTagUp(index: number): void {
     if (index > 0) {
       const tag = this.componentContent.tags[index];
       this.componentContent.tags.splice(index, 1);
       this.componentContent.tags.splice(index - 1, 0, tag);
-      this.projectService.componentChanged();
+      this.projectService.saveProject();
     }
   }
 
@@ -77,14 +77,14 @@ export class EditComponentTagsComponent {
       const tag = this.componentContent.tags[index];
       this.componentContent.tags.splice(index, 1);
       this.componentContent.tags.splice(index + 1, 0, tag);
-      this.projectService.componentChanged();
+      this.projectService.saveProject();
     }
   }
 
   deleteTag(indexOfTagToDelete: number): void {
     if (confirm($localize`Are you sure you want to delete this tag?`)) {
       this.componentContent.tags.splice(indexOfTagToDelete, 1);
-      this.projectService.componentChanged();
+      this.projectService.saveProject();
     }
   }
 }
diff --git a/...s/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts b/...s/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts
@@ -1,36 +1,41 @@
-import { Component, inject, Inject } from '@angular/core';
+import { Component, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import { EditComponentComponent } from '../edit-component/edit-component.component';
-import { EditComponentAdvancedButtonComponent } from '../edit-component-advanced-button/edit-component-advanced-button.component';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDividerModule } from '@angular/material/divider';
 import { ComponentTypeService } from '../../../services/componentTypeService';
+import { MatSlideToggle } from '@angular/material/slide-toggle';
+import { FormsModule } from '@angular/forms';
+import { Component as WISEComponent } from '../../../common/Component';
+import { EditComponentAdvancedComponent } from '../../../../../app/authoring-tool/edit-component-advanced/edit-component-advanced.component';
 import { TeacherProjectService } from '../../../services/teacherProjectService';
 
 @Component({
   imports: [
-    EditComponentAdvancedButtonComponent,
     EditComponentComponent,
+    EditComponentAdvancedComponent,
+    FormsModule,
     MatButtonModule,
     MatDialogModule,
-    MatDividerModule
+    MatDividerModule,
+    MatSlideToggle
   ],
   template: `
     <div class="flex items-center">
       <h2 mat-dialog-title i18n>Edit: {{ componentIndex }}. {{ componentTypeLabel }}</h2>
-      <span class="flex grow"></span>
-      <edit-component-advanced-button
-        [componentContent]="data.componentContent"
-        [nodeId]="data.nodeId"
-      />
+      <mat-slide-toggle [(ngModel)]="advancedMode" i18n>Advanced mode</mat-slide-toggle>
     </div>
     <mat-divider />
     <mat-dialog-content>
-      <edit-component
-        class="block py-4"
-        [componentContent]="data.componentContent"
-        [nodeId]="data.nodeId"
-      />
+      @if (advancedMode) {
+        <edit-component-advanced [component]="component" />
+      } @else {
+        <edit-component
+          class="block py-4"
+          [componentContent]="data.componentContent"
+          [nodeId]="data.nodeId"
+        />
+      }
     </mat-dialog-content>
     <mat-divider />
     <mat-dialog-actions align="end">
@@ -46,18 +51,22 @@ import { TeacherProjectService } from '../../../services/teacherProjectService';
   `
 })
 export class EditComponentDialogComponent {
+  protected advancedMode = false;
+  protected component: WISEComponent;
   protected componentIndex: number;
   protected componentTypeLabel: string;
 
   constructor(
+    private componentTypeService: ComponentTypeService,
     @Inject(MAT_DIALOG_DATA) public data: any,
     private projectService: TeacherProjectService
   ) {
+    this.component = new WISEComponent(this.data.componentContent, this.data.nodeId);
     this.componentIndex =
       this.projectService
         .getNode(this.data.nodeId)
         .getComponentIndex(this.data.componentContent.id) + 1;
-    this.componentTypeLabel = inject(ComponentTypeService).getComponentTypeLabel(
+    this.componentTypeLabel = this.componentTypeService.getComponentTypeLabel(
       this.data.componentContent.type
     );
   }

diff --git a/src/messages.xlf b/src/messages.xlf
@@ -824,32 +824,6 @@
           <context context-type="linenumber">16,19</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="5222210534332546893" datatype="html">
-        <source>Advanced Activity Settings</source>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/app/authoring-tool/edit-component-advanced/edit-component-advanced.component.html</context>
-          <context context-type="linenumber">2,5</context>
-        </context-group>
-      </trans-unit>
-      <trans-unit id="5547981558491672240" datatype="html">
-        <source> Close </source>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/app/authoring-tool/edit-component-advanced/edit-component-advanced.component.html</context>
-          <context context-type="linenumber">10,14</context>
-        </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts</context>
-          <context context-type="linenumber">38,43</context>
-        </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/assets/wise5/authoringTool/node/advanced/node-advanced-authoring/node-advanced-authoring.component.html</context>
-          <context context-type="linenumber">46,50</context>
-        </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/assets/wise5/themes/default/notebook/edit-notebook-item-dialog/edit-notebook-item-dialog.component.html</context>
-          <context context-type="linenumber">114,119</context>
-        </context-group>
-      </trans-unit>
       <trans-unit id="7783846153124093220" datatype="html">
         <source>Add Visibility Constraint</source>
         <context-group purpose="location">
@@ -11176,22 +11150,40 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
           <context context-type="linenumber">22,26</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="6201638315245239510" datatype="html">
-        <source>Advanced</source>
+      <trans-unit id="7383335766319610131" datatype="html">
+        <source>Edit: <x id="INTERPOLATION" equiv-text="{{ componentIndex }}"/>. <x id="INTERPOLATION_1" equiv-text="{{ componentTypeLabel }}"/></source>
         <context-group purpose="location">
-          <context context-type="sourcefile">src/assets/wise5/authoringTool/components/edit-component-advanced-button/edit-component-advanced-button.component.html</context>
-          <context context-type="linenumber">6,10</context>
+          <context context-type="sourcefile">src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts</context>
+          <context context-type="linenumber">25,26</context>
         </context-group>
+      </trans-unit>
+      <trans-unit id="6159883120617273592" datatype="html">
+        <source>Advanced mode</source>
         <context-group purpose="location">
-          <context context-type="sourcefile">src/assets/wise5/authoringTool/components/edit-node-advanced-button/edit-node-advanced-button.component.ts</context>
-          <context context-type="linenumber">17,21</context>
+          <context context-type="sourcefile">src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts</context>
+          <context context-type="linenumber">26,29</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="7383335766319610131" datatype="html">
-        <source>Edit: <x id="INTERPOLATION" equiv-text="{{ componentIndex }}"/>. <x id="INTERPOLATION_1" equiv-text="{{ componentTypeLabel }}"/></source>
+      <trans-unit id="5547981558491672240" datatype="html">
+        <source> Close </source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts</context>
-          <context context-type="linenumber">20,21</context>
+          <context context-type="linenumber">43,48</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/authoringTool/node/advanced/node-advanced-authoring/node-advanced-authoring.component.html</context>
+          <context context-type="linenumber">46,50</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/themes/default/notebook/edit-notebook-item-dialog/edit-notebook-item-dialog.component.html</context>
+          <context context-type="linenumber">114,119</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="6201638315245239510" datatype="html">
+        <source>Advanced</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/authoringTool/components/edit-node-advanced-button/edit-node-advanced-button.component.ts</context>
+          <context context-type="linenumber">17,21</context>
         </context-group>
       </trans-unit>
       <trans-unit id="3021342818793175999" datatype="html">