Allow to disable preview

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.html

@@ -27,6 +27,7 @@
 </div>
 
 <code-demo
+  [showPreview]="showPreview"
   [allowSwitchingFiles]="false"
   [(ngModel)]="code"
   (ngModelChange)="update()"

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

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { ContentService } from '../../../services/content.service';
 import { ContentSlide, CustomBlock } from '../../../types';
 
@@ -12,7 +12,7 @@ interface SelectableFiles {
   templateUrl: './codelab-code-demo-console-editor.component.html',
   styleUrls: ['./codelab-code-demo-console-editor.component.css']
 })
-export class CodelabCodeDemoConsoleEditorComponent {
+export class CodelabCodeDemoConsoleEditorComponent implements OnInit {
   files = ['app.ts'];
   @Input() code = {};
   @Input() ui = 'browser';
@@ -25,9 +25,25 @@ export class CodelabCodeDemoConsoleEditorComponent {
 
   openFiles: string[] = [];
 
+  ngOnInit() {
+    this.inferVars();
+  }
   constructor(private readonly contentService: ContentService) {}
 
   update() {
+    this.inferVars();
+
+    this.contentService.updateBlock(this.presentationId, this.slide.id, {
+      ...this.block,
+      props: {
+        code: this.code,
+        selectedFiles: this.selectedFiles,
+        showPreview: this.showPreview
+      }
+    });
+  }
+
+  private inferVars() {
     this.files = Object.keys(this.code);
     this.selectedFiles =
       this.selectedFiles.length === 0
@@ -40,15 +56,6 @@ export class CodelabCodeDemoConsoleEditorComponent {
     this.openFiles = this.selectedFiles
       .filter(file => file.selected)
       .map(({ name }) => name);
-
-    this.contentService.updateBlock(this.presentationId, this.slide.id, {
-      ...this.block,
-      props: {
-        code: this.code,
-        selectedFiles: this.selectedFiles,
-        showPreview: this.showPreview
-      }
-    });
   }
 
   updateFileName(index: number, oldName: string, newName: string) {

apps/codelab/src/app/components/exercise/exercise.component.ts

@@ -38,8 +38,8 @@ export function getChanges(current, previous) {
 export class CodelabExerciseComponent extends CodeDemoComponent {
   isSolved = false;
 
-  constructor(private readonly cdr: ChangeDetectorRef) {
-    super();
+  constructor(protected readonly cdr: ChangeDetectorRef) {
+    super(cdr);
   }
 
   showDogs() {

libs/code-demos/src/lib/code-demo/code-demo.component.css

@@ -1,8 +1,8 @@
-.wrapper > * {
+:host > * {
   flex: 1;
 }
 
-.wrapper {
+:host {
   display: flex;
   height: 100%;
   width: 100%;

libs/code-demos/src/lib/code-demo/code-demo.component.html

@@ -1,20 +1,20 @@
-<div *ngIf="files$ | async as compiledCode" class="wrapper">
-  <code-demo-multitab-editor
-    class="quarter"
-    [enableAutoFolding]="enableAutoFolding"
-    [files]="files"
-    [allowSwitchingFiles]="true"
-    [solutions]="solutions"
-    [(ngModel)]="code"
-    [highlights]="highlights"
-    (ngModelChange)="update($event)"
-  ></code-demo-multitab-editor>
-  <code-demo-runner
-    class="quarter"
-    [url]="url"
-    [presets]="presets"
-    [bootstrap]="bootstrap"
-    [code]="compiledCode"
-    [ui]="ui"
-  ></code-demo-runner>
-</div>
+<code-demo-multitab-editor
+  *ngIf="this.code"
+  class="quarter"
+  [enableAutoFolding]="enableAutoFolding"
+  [files]="files"
+  [allowSwitchingFiles]="allowSwitchingFiles"
+  [solutions]="solutions"
+  [(ngModel)]="code"
+  [highlights]="highlights"
+  (ngModelChange)="update($event)"
+></code-demo-multitab-editor>
+<code-demo-runner
+  *ngIf="showPreview && files$ | async as compiledCode"
+  class="quarter"
+  [url]="url"
+  [presets]="presets"
+  [bootstrap]="bootstrap"
+  [code]="compiledCode"
+  [ui]="ui"
+></code-demo-runner>

libs/code-demos/src/lib/code-demo/code-demo.component.ts

@@ -1,4 +1,10 @@
-import { Component, forwardRef, Input, OnDestroy } from '@angular/core';
+import {
+  ChangeDetectorRef,
+  Component,
+  forwardRef,
+  Input,
+  OnDestroy
+} from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import {
   filter,
@@ -69,7 +75,7 @@ export class CodeDemoComponent implements ControlValueAccessor, OnDestroy {
   @Input() showPreview = true;
 
   openFileIndex = 0;
-  code: Code = {};
+  code?: Code;
   filesConfig: any;
   changedTsFilesSubject = new BehaviorSubject<Record<string, string>>({});
   changedStaticFilesSubject = new ReplaySubject<Record<string, string>>(1);
@@ -79,7 +85,7 @@ export class CodeDemoComponent implements ControlValueAccessor, OnDestroy {
   private codeCache: Record<string, string> = {};
   private onChange: (code: Code) => void;
 
-  constructor() {
+  constructor(protected readonly cdr: ChangeDetectorRef) {
     const ts = this.changedTsFilesSubject.pipe(
       map(files =>
         Object.entries(files).reduce((result, [file, code]) => {
@@ -128,6 +134,7 @@ export class CodeDemoComponent implements ControlValueAccessor, OnDestroy {
       this.code = code;
       this.files = this.files || [Object.keys(this.code)[0]];
       this.update(code);
+      this.cdr.markForCheck();
     }
   }