feat: docs app

docs/app/blocks/components/tabbed-example-block/tabbed-example-block.component.ts

@@ -0,0 +1,52 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+} from '@angular/core';
+import { forkJoin,  of as observableOf,  Observable } from 'rxjs';
+import { map,  catchError } from 'rxjs/operators';
+import { NgxExampleView } from '../../enum.example-view';
+import { NgxCodeLoaderService } from '../../../@theme/services/code-loader.service';
+
+@Component({
+  selector: 'ngx-tabbed-example-block',
+  styleUrls: ['./tabbed-example-block.component.scss'],
+  templateUrl: './tabbed-example-block.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NgxTabbedExampleBlockComponent {
+
+
+  @Input() hasViewSwitch = false;
+  @Output() changeView = new EventEmitter<NgxExampleView>();
+  examples = [];
+
+  @Input()
+  set content({ files }) {
+    forkJoin(files.map(file => this.load(file)))
+      .subscribe(loadedFiles => {
+        (loadedFiles[0] as any).active = true;
+        this.examples = loadedFiles;
+        this.cd.detectChanges();
+      });
+  }
+
+  constructor(private codeLoader: NgxCodeLoaderService, private cd: ChangeDetectorRef) {
+  }
+
+  switchToLiveView() {
+    this.changeView.emit(NgxExampleView.LIVE);
+  }
+
+  private load(path): Observable<any> {
+    const extension = path.split('.').pop();
+    return this.codeLoader.load(path)
+      .pipe(
+        map(code => ({ code, path, extension })),
+        catchError(e => observableOf('')),
+      );
+  }
+}