/
demo.component.ts
88 lines (83 loc) · 2.5 KB
/
demo.component.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
import { Component, Input, OnDestroy } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { forkJoin, Observable, Subject, Subscriber } from 'rxjs';
import { catchError, map, takeUntil } from 'rxjs/operators';
@Component({
selector: 'demo-component',
styleUrls: ['./demo.component.scss'],
templateUrl: './demo.component.html',
})
export class DemoComponent implements OnDestroy {
@Input() demoId!: string;
@Input() demoTitle!: string;
viewCode = false;
typescriptFile!: string;
htmlFile!: string;
stylesFile!: string;
private _destroy$ = new Subject<void>();
constructor(private _http: HttpClient) {}
ngOnDestroy(): void {
this._destroy$.next();
}
toggleCodeView(): void {
if (this.viewCode) {
this.viewCode = false;
} else {
const demoMarker: number = this.demoId.indexOf('-demo-');
const demoFolderName: string = this.demoId.slice(0, demoMarker);
forkJoin({
typescript: this._http.get(
`assets/demos/${demoFolderName}/demos/${this.demoId}/${this.demoId}.component.ts`,
{
responseType: 'text',
}
),
html: this._http.get(
`assets/demos/${demoFolderName}/demos/${this.demoId}/${this.demoId}.component.html`,
{
responseType: 'text',
}
),
styles: this._http.get(
`assets/demos/${demoFolderName}/demos/${this.demoId}/${this.demoId}.component.scss`,
{
responseType: 'text',
}
),
})
.pipe(
map(
(responses: {
typescript: string;
html: string;
styles: string;
}) => {
return {
typescript: responses.typescript,
html: responses.html,
styles: responses.styles,
};
}
),
catchError((error: Response) => {
return new Observable<any>((subscriber: Subscriber<any>) => {
try {
subscriber.error(error);
} catch (err) {
subscriber.error(error);
}
});
}),
takeUntil(this._destroy$)
)
.subscribe(
(demo: { typescript: string; html: string; styles: string }) => {
this.typescriptFile = demo.typescript;
this.htmlFile = demo.html;
this.stylesFile = demo.styles;
this.viewCode = true;
}
);
}
}
}