Make preview optional in code-deom component

Author: NothingEverHappens

apps/codelab/src/app/admin/content/presentation-editor/wrappers/custom-component-editors/codelab-code-demo-console-editor/codelab-code-demo-console-editor.component.css

@@ -0,0 +1,3 @@
+.wrapper {
+  display: flex;
+}

apps/codelab/src/app/admin/content/presentation-editor/wrappers/custom-component-editors/codelab-code-demo-console-editor/codelab-code-demo-console-editor.component.html

@@ -1,18 +1,29 @@
-<div>
-  <div *ngFor="let file of selectedFiles; let i = index">
-    <mat-checkbox [(ngModel)]="file.selected" (ngModelChange)="update()">
-      <input
-        [ngModel]="file.name"
-        (ngModelChange)="updateFileName(i, file.name, $event)"
-      />
-    </mat-checkbox>
-    <button mat-icon-button (click)="deleteFile(file.name)">
-      <mat-icon>cancel</mat-icon>
+<div class="wrapper">
+  <div class="file-editor">
+    <div *ngFor="let file of selectedFiles; let i = index">
+      <mat-checkbox [(ngModel)]="file.selected" (ngModelChange)="update()">
+        <input
+          [ngModel]="file.name"
+          (ngModelChange)="updateFileName(i, file.name, $event)"
+        />
+      </mat-checkbox>
+      <button mat-icon-button (click)="deleteFile(file.name)">
+        <mat-icon>cancel</mat-icon>
+      </button>
+    </div>
+    <button
+      mat-button
+      [disabled]="code[defaultNewFileName]"
+      (click)="addFile()"
+    >
+      Add file
     </button>
   </div>
-  <button mat-button [disabled]="code[defaultNewFileName]" (click)="addFile()">
-    Add file
-  </button>
+  <div>
+    <mat-checkbox [(ngModel)]="showPreview" (ngModelChange)="update()">
+      Show preview
+    </mat-checkbox>
+  </div>
 </div>
 
 <code-demo

apps/codelab/src/app/admin/content/presentation-editor/wrappers/custom-component-editors/codelab-code-demo-console-editor/codelab-code-demo-console-editor.component.ts

@@ -20,6 +20,7 @@ export class CodelabCodeDemoConsoleEditorComponent {
   @Input() slide!: ContentSlide;
   @Input() presentationId!: string;
   @Input() selectedFiles: SelectableFiles[] = [];
+  @Input() showPreview = true;
   readonly defaultNewFileName = 'new.ts';
 
   openFiles: string[] = [];
@@ -44,7 +45,8 @@ export class CodelabCodeDemoConsoleEditorComponent {
       ...this.block,
       props: {
         code: this.code,
-        selectedFiles: this.selectedFiles
+        selectedFiles: this.selectedFiles,
+        showPreview: this.showPreview
       }
     });
   }