fuse-angular/src/app/main/content/components/angular-material/example-viewer/example-viewer.html

<div class="example-viewer-wrapper mat-white-bg mat-elevation-z2">

    <div class="example-viewer-header">

        <div class="example-viewer-title">{{exampleData?.title}}</div>

        <button mat-icon-button type="button" (click)="toggleSourceView()"
                [matTooltip]="'View source'">
            <mat-icon>
                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fit=""
                     preserveAspectRatio="xMidYMid meet" focusable="false">
                    <path fill="none" d="M0 0h24v24H0V0z"></path>
                    <path
                        d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"></path>
                </svg>
            </mat-icon>
        </button>
    </div>

    <div class="example-viewer-source" [fxShow]="showSource">

        <mat-tab-group [(selectedIndex)]="selectedIndex">
            <mat-tab label="HTML"></mat-tab>
            <mat-tab label="TS"></mat-tab>
            <mat-tab label="CSS"></mat-tab>
        </mat-tab-group>
        <div class="tab-content">
            <section class="tab" *ngIf="selectedIndex === 0"
                     [@animate]="{value:'*',params:{opacity:'0',duration:'200ms'}}">
                <button mat-icon-button type="button" class="example-source-copy"
                        title="Copy example source" aria-label="Copy example source to clipboard"
                        (click)="copySource(htmlView.el.nativeElement.innerText)">
                    <mat-icon>content_copy</mat-icon>
                </button>
                <fuse-highlight lang="html"
                                [path]="'/assets/angular-material-examples/'+example+'/'+example+'-example.html'">
                </fuse-highlight>
            </section>

            <section class="tab" *ngIf="selectedIndex === 1"
                     [@animate]="{value:'*',params:{opacity:'0',duration:'200ms'}}">
                <button mat-icon-button type="button" class="example-source-copy"
                        title="Copy example source" aria-label="Copy example source to clipboard"
                        (click)="copySource(tsView.el.nativeElement.innerText)">
                    <mat-icon>content_copy</mat-icon>
                </button>
                <fuse-highlight lang="typescript"
                                [path]="'/assets/angular-material-examples/'+example+'/'+example+'-example.ts'">
                </fuse-highlight>
            </section>

            <section class="tab" *ngIf="selectedIndex === 2"
                     [@animate]="{value:'*',params:{opacity:'0',duration:'200ms'}}">
                <button mat-icon-button type="button" class="example-source-copy"
                        title="Copy example source" aria-label="Copy example source to clipboard"
                        (click)="copySource(cssView.el.nativeElement.innerText)">
                    <mat-icon>content_copy</mat-icon>
                </button>
                <fuse-highlight lang="css"
                                [path]="'/assets/angular-material-examples/'+example+'/'+example+'-example.css'">
                </fuse-highlight>
            </section>
        </div>
    </div>

    <div class="example-viewer-body" [fxHide]="showSource">
        <!--<ng-template [portalHost]="selectedPortal"></ng-template>-->
        <!--<ng-template [cdkPortalHost]="selectedPortal"></ng-template>-->
        <div #previewContainer></div>
    </div>
</div>