content.component.html

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer class="sidenav" fixedInViewport="false"
      [attr.role]="(!isHandset$ | async) ? 'dialog' : 'navigation'"
      [autoFocus]="false"
      mode="push"
      [opened]="!(!isHandset$ | async)">
    <mat-toolbar>
      <span>Menu</span>
      <div class="grow"></div>
      <button
        class="close-button"
        type="button"
        aria-label="Close sidenav"
        mat-icon-button
        (click)="drawer.toggle()">
        <mat-icon aria-label="Side nav close icon">close</mat-icon>
      </button>
    </mat-toolbar>
    <mat-nav-list>
      <div class="mat-list-item-text" *ngFor="let item of contentItems">
        <button (click)="drawer.toggle(); fetchCode(item.name);" style="text-align: left; text-transform: uppercase;" mat-button class="mat-3-line side-nav-buttons" role="listitem">
          {{item.name}}
        </button>
      </div>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar layout-align="center" color="secondary">
      <button
        type="button"
        aria-label="Toggle sidenav"
        mat-mini-fab
        color="primary"
        (click)="drawer.toggle()">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <span style="text-transform: uppercase"> {{contentTitle}}</span>
    </mat-toolbar>
    <!-- Add Content Here -->
    <mat-tab-group *ngIf="!isLoading">
        <mat-tab *ngIf="code_c" label="C">
          <pre>
              <div [innerHTML]="code_c" class="example-scrolling-content">
              </div>
            </pre>
        </mat-tab>
        <mat-tab *ngIf="code_cpp" label="C++">
          <pre>
              <div [innerHTML]="code_cpp" class="example-scrolling-content">
              </div>
            </pre>
        </mat-tab>
        <mat-tab *ngIf="code_cs" label="C#">
          <pre>
              <div [innerHTML]="code_cs" class="example-scrolling-content">
              </div>
            </pre>
        </mat-tab>
        <mat-tab *ngIf="code_go" label="go">
          <pre>
              <div [innerHTML]="code_go" class="example-scrolling-content">
              </div>
            </pre>
        </mat-tab>
        <mat-tab *ngIf="code_java" label="Java">
          <pre>
              <div [innerHTML]="code_java" class="example-scrolling-content">
              </div>
            </pre>
        </mat-tab>
        <mat-tab *ngIf="code_js" label="js">
          <pre>
              <div [innerHTML]="code_js" class="example-scrolling-content">
              </div>
            </pre>
        </mat-tab>
        <mat-tab *ngIf="code_py" label="py">
          <pre>
              <div [innerHTML]="code_py" class="example-scrolling-content">
              </div>
            </pre>
        </mat-tab>
      </mat-tab-group>

      <mat-spinner *ngIf="isLoading"></mat-spinner>
  </mat-sidenav-content>
</mat-sidenav-container>