Angular Side Nav Material Tree Diagram

<!doctype html>
<html lang="en">
<head>
<!--link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"-->
  <meta charset="utf-8">
  <title>Global Security Research and Architecture</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

{
    "name": "@plnkr/starter-angular",
    "version": "1.0.3",
    "description": "Angular starter template",
    "dependencies": {
       "@angular/animations": "^8.1.2",
        "@angular/cdk": "^8.1.1",
        "@angular/common": "^8.1.2",
        "@angular/compiler": "^8.1.2",
        "@angular/core": "^8.1.2",
        "@angular/forms": "^8.1.2",
        "@angular/material": "^8.1.1",
        "@angular/platform-browser": "^8.1.2",
        "@angular/platform-browser-dynamic": "^8.1.2",
        "@angular/router": "^8.1.2",
        "@datorama/akita": "^4.6.0",
        "angular-oauth2-oidc": "^8.0.1",
        "angular-pipes": "^9.0.2",
        "angular2-tree-diagram": "^1.0.6",
        "buffer": "^5.2.1",
        "chart.js": "^2.8.0",
        "core-js": "^3.1.4",
        "material-design-icons": "^3.0.1",
        "ng2-charts": "^2.3.0",
        "rxjs": "~6.5.2",
        "speed-measure-webpack-plugin": "^1.3.1",
        "zone.js": "~0.9.1"
    },
    "main": "./lib/main.ts",
    "plnkr": {
        "runtime": "system",
        "useHotReload": true
    }
}

{
    "compilerOptions": {
        "experimentalDecorators": true
    },
    "include": [
        "src/**/*",
        "node_modules/angular2-tree-diagram"
    ],
    "exclude": [
        "node_modules",
        "test.ts",
        "node_modules/**/*.spec.ts",
        "**/*.spec.ts"
    ]
}

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-question-tree',
  templateUrl: './question-tree.component.html',
  styleUrls: ['./question-tree.component.scss']
})
export class QuestionTreeComponent implements OnInit {

  public _data = [
    {
      'guid': 'bc4c7a02-5379-4046-92be-12c67af4295a',
      'displayName': 'Elentrix',
      'children': [
        '85d412c2-ebc1-4d56-96c9-7da433ac9bb2',
        '28aac445-83b1-464d-9695-a4157dab6eac'
      ]
    },
    {
      'guid': '097b8d7c-e0d3-483d-9770-cb5306f7801c',
      'displayName': 'Insuron',
      'children': [
        'a2d8ec53-de45-4182-af74-58c27dc8c06c',
        '6ceb08e1-3da5-4532-a5d8-437fe714b685'
      ]
    }
  ];

  public get data() {
    return this._data;
  }

  constructor() { 
    console.log(this.data);
  }

  ngOnInit() {}

}

<div>
<tree-diagram [data]="data"></tree-diagram>
</div>

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { HttpClientModule } from '@angular/common/http';
import { LayoutModule } from '@angular/cdk/layout';

import { AppRoutingModule } from './app-routing.module';
import { NavigationModule } from './navigation/navigation.module';

import { AppComponent } from './app.component';

import { LoaderProvider } from './services/loader.provider';
import { LoaderComponent } from './components/shared/loader/loader.component';
import { LoaderInterceptor } from './interceptors/loader.interceptor';

@NgModule({
  declarations: [
    AppComponent,
    LoaderComponent,
  ],
  imports: [
    BrowserModule,
    OAuthModule.forRoot(),
    BrowserAnimationsModule,
    LayoutModule,
    HttpClientModule,
    AppRoutingModule,
    NavigationModule
  ],
  providers: [
    LoaderProvider, {
    useClass: LoaderInterceptor,
    multi: true
  }, AppSettingsService],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const AppRoutes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' }
];

@NgModule({
  imports: [ RouterModule.forRoot(AppRoutes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

<app-loader></app-loader>
<ng-template #content><app-navigation></app-navigation></ng-template>

import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  public constructor(private oauthService: OAuthService,
    private location: Location,
    private router: Router) {
    
  }

  public ngOnInit() {}

}

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { QuestionTreeComponent } from '../components/question-tree/question-tree.component';

export const NavigationRoutes: Routes = [

  { path: 'question-tree', component: QuestionTreeComponent },
  { path: '**', redirectTo: '/question-tree' }
];

@NgModule({
  imports: [RouterModule.forChild(NavigationRoutes)],
  exports: [RouterModule]
})
export class NavigationRoutingModule { }

import { NgModule } from '@angular/core';
import { NgArrayPipesModule } from 'angular-pipes';
import { CommonModule } from '@angular/common';

import { UltiMaterialModule } from '../ulti-material/ulti-material.module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { NavigationComponent } from './navigation.component';
import { QuestionTreeComponent } from '../components/question-tree/question-tree.component';

import { TreeDiagram } from 'angular2-tree-diagram';
import { NavigationRoutingModule } from './navigation-routing.module';

@NgModule({
  declarations: [
    QuestionTreeComponent
  ],
  imports: [
    CommonModule,
    NgArrayPipesModule,
    UltiMaterialModule,
    FormsModule,
    ReactiveFormsModule,
    TreeDiagram,
    NavigationRoutingModule
  ],
  exports: [
    CommonModule,
    UltiMaterialModule,
    NavigationComponent
  ]
})
export class NavigationModule {}

import { Component } from '@angular/core';
import { BreakpointObserver, Breakpoints, BreakpointState } from '@angular/cdk/layout';
import { Router } from '@angular/router';
import { ActivatedRoute } from '@angular/router';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-navigation',
  templateUrl: './navigation.component.html',
  styleUrls: ['./navigation.component.scss']
})
export class NavigationComponent {

  private _showSubMenu = false;

  public get ShowSubMenu () {
    return this._showSubMenu;
  }

  public set ShowSubMenu(value) {
    this._showSubMenu = value;
  }

  isHandset$: Observable<BreakpointState> = this.breakpointObserver.observe(Breakpoints.Handset);

  public constructor(private breakpointObserver: BreakpointObserver,
    private router: Router,
    private route: ActivatedRoute
    ) {

  }

  public toggleSubMenu() {
    this._showSubMenu = !this._showSubMenu;
  }
}

<mat-toolbar color="primary">
    <button 
      type="button"
      aria-label="Toggle sidenav"
      mat-icon-button
      (click)="left.toggle()"
      *ngIf="isHandset$ | async"
      >
      <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
    </button>
    <span><mat-icon class="logo" svgIcon="logo2"></mat-icon></span>
    <span class="span-fill-remaining-space"></span>
    <span>Global Security Research and Architecture</span>
    <button 
      type="button"
      aria-label="Toggle sidenav"
      mat-icon-button
      (click)="right.toggle()"
      *ngIf="isHandset$ | async"
      >
      <mat-icon aria-label="Side nav toggle icon">account_circle</mat-icon>
    </button>
</mat-toolbar>
<mat-sidenav-container class="sidenav-container">
  <mat-sidenav
    #left
    class="sidenav"
    fixedInViewport="false"
    fixedTopGap="64"
    [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'over' : 'side'"
    [opened]="!(isHandset$ | async)"
    position="start">
    <mat-nav-list>
      
      <a mat-list-item (click)="toggleSubMenu()">
        <mat-icon mat-list-icon class="question_answer">question_answer</mat-icon>
        <span class="label">Surveys</span>
        <mat-icon *ngIf="!ShowSubMenu">chevron_right</mat-icon>
        <mat-icon *ngIf="ShowSubMenu">expand_more</mat-icon>
      </a>
      <mat-nav-list class="sidenav-submenu" *ngIf="ShowSubMenu">
        
        <a mat-list-item [routerLink]="['/question-tree']" routerLinkActive (click)="left.toggle()"> 
          <mat-icon class="question_answer">question_answer</mat-icon>
          <span class="label">Tree</span>
        </a>
      </mat-nav-list>
     
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <div class="material-page-spacing">
      <router-outlet></router-outlet>
    </div>
  </mat-sidenav-content>
  <mat-sidenav #right position="end">
      <app-user-panel></app-user-panel>
   </mat-sidenav>
</mat-sidenav-container>

.sidenav-container {
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.sidenav {
  width: 260px;
}

.mat-toolbar.mat-primary {
  position: sticky;
  top: 0;
}

.span-fill-remaining-space {
  flex: 1 1 auto;
}

mat-icon.md-14 {
  font-size: 14px;
}
  
mat-icon.md-18 {
  font-size: 18px;
}
  
mat-icon.md-24 {
  font-size: 24px;
}
  
mat-icon.md-36 {
  font-size: 36px;
}
  
mat-icon.md-48 {
  font-size: 48px;
}

mat-icon.logo {
  vertical-align: middle;
  height: 75px;
  width: 75px;
}

/* Absolute Center Spinner */
.loading-indicator {
  position: fixed;
  z-index: 999;
  height: 2em;
  width: 2em;
  overflow: show;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  animation-delay: 100ms;
  animation-duration: 200ms;
}

/* Transparent Overlay */
.loading-indicator:before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.3);
}

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';
import { MatNativeDateModule } from '@angular/material/core';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatListModule } from '@angular/material/list';
import { MatChipsModule } from '@angular/material/chips';

import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatSelectModule } from '@angular/material/select';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatTableModule } from '@angular/material/table';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTreeModule } from '@angular/material/tree';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatMenuModule } from '@angular/material/menu';
import { MatTabsModule  } from '@angular/material';
import { MatGridListModule } from '@angular/material';
import { MatProgressBarModule } from '@angular/material';

import { MatPaginatorModule } from '@angular/material/paginator';
import { MatIconRegistry } from '@angular/material/icon';
import { MatCardModule } from '@angular/material/card';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { DomSanitizer } from '@angular/platform-browser';

@NgModule({
  imports: [
    CommonModule,
    MatToolbarModule,
    MatButtonModule,
    MatIconModule,
    MatSidenavModule,
    MatListModule,
    MatCardModule,
    MatChipsModule,
    MatTableModule,
    MatPaginatorModule,
    MatExpansionModule,
    MatSnackBarModule,
    MatFormFieldModule,
    MatInputModule,
    MatSelectModule,
    MatMenuModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatProgressSpinnerModule,
    MatTreeModule,
    MatTabsModule,
    MatGridListModule,
    MatProgressBarModule,
    DragDropModule
  ],
  exports: [
    MatToolbarModule,
    MatButtonModule,
    MatIconModule,
    MatSidenavModule,
    MatListModule,
    MatCardModule,
    MatChipsModule,
    MatTableModule,
    MatPaginatorModule,
    MatExpansionModule,
    MatSnackBarModule,
    MatFormFieldModule,
    MatInputModule,
    MatSelectModule,
    MatMenuModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatProgressSpinnerModule,
    MatTreeModule,
    MatTabsModule,
    MatGridListModule,
    MatProgressBarModule,
    DragDropModule
  ],
  declarations: []
})
export class UltiMaterialModule {

  constructor(private matIconRegistry: MatIconRegistry, private domSanitizer: DomSanitizer ) {
    this.matIconRegistry.addSvgIcon(
      `logo2`,
      this.domSanitizer.bypassSecurityTrustResourceUrl(`../../assets/images/logo.svg`)
    );
  }
 }

/* You can add global styles to this file, and also import other style files */

html, body { height: 100%; }
body { margin: 0; font-family: 'Avenir', sans-serif; }

.material-page-spacing {
    padding-top: 10px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 30px;
}

// This file can be replaced during build by using the `fileReplacements` array.
// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
// The list of file replacements can be found in `angular.json`.

export const environment = {
  production: false
};

/*
 * For easier debugging in development mode, you can import the following file
 * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
 *
 * This import should be commented out in production mode because it will have a negative impact
 * on performance if an error is thrown.
 */
// import 'zone.js/dist/zone-error';  // Included with Angular CLI.