Я создал новый sidenav в StackBlitz, и я хочу адаптировать его к моему проекту Angular Material.Когда начать?

Question

** Редактировать: ** Решение для этого случая в конкретном случае было задумано не через расширение, а скорее как нечто более простое, обеспечивающее более простой подход.

Сценарий:

• Недавно с помощью сообщества и увидев примеры, я получил sidenav, который хотел использовать в своем проекте.
• Проблема в том, что я сделал это в Stackblitz, и у меня сложная задача.время адаптировать его к моему текущему проекту, чтобы у меня был новый sidenav.
• Это sidenav в stackblitz: Stackblitz sidenav

Вопрос: Есть ли способ передать компонент, который у меня есть stackblitz, в мой компонент, уже созданный в проекте (который имеет соответствующие методы и функции), без необходимости стирать то, что у меня уже есть?И вот мой код проекта:

app-header.component.html

<!--- Toolbar starts here-->
<div class="container-toolbar">
<mat-toolbar color="primary" class="fixed-header">

<button
type="button"
aria-label="Toggle sidenav"
mat-icon-button
(click)="drawer.toggle()">
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button>
<span class="spacer"></span>
<button type="button" mat-icon-button href="">
<mat-icon matTooltip="Salir">exit_to_app</mat-icon>
</button>


</mat-toolbar>
</div>

<!--- Sidenav starts here -->
<mat-sidenav-container style="height:100%;width:100%;">
  <mat-sidenav #drawer fixedInViewport="true"
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      [mode]="(isHandset$ | async) ? 'side' : 'push'"
      [opened]="(isHandset$ | async)" style="box-shadow: 0 5px 5px #999;z-index: 2;">
   		<mat-nav-list>
        <mat-list-item>
          <a routerLink="/dashboard">Static 1</a>
          <mat-icon mat-list-icon>home</mat-icon>
          </mat-list-item>
          <mat-list-item>
          <a routerLink="/parametros">Static 2</a>
          <mat-icon mat-list-icon>tune</mat-icon>
          </mat-list-item>
            <mat-list-item>
            <a routerLink="/#">Static 3</a>
            <mat-icon mat-list-icon>settings</mat-icon>
            </mat-list-item>
            <mat-list-item>
            <a routerLink="/#">Static 4</a>
            <mat-icon mat-list-icon>layers</mat-icon>
            </mat-list-item>
            <mat-list-item (click)="showSubmenu = !showSubmenu" class="parent">
              <span class="full-width" *ngIf="isExpanded || isShowing">No static</span>
              <mat-icon mat-list-icon>flash_on</mat-icon>
              <mat-icon class="menu-button" [ngClass]="{'rotated' : showSubmenu}" *ngIf="isExpanded || isShowing">expand_more</mat-icon>
            </mat-list-item>
			<div class="submenu" [ngClass]="{'expanded' : showSubmenu}" *ngIf="isShowing || isExpanded">
          <mat-list-item>
              <a routerLink="/#">Options 1</a>
              </mat-list-item>
              <mat-list-item>
                <a routerLink="/#">Options 2</a>
                </mat-list-item>
        <h2 matSubheader class="mat-submenu-title"><mat-icon>account_balance</mat-icon>  Test</h2>
				<mat-list-item (click)="showSubSubMenu = !showSubSubMenu" class="parent">
					<span class="full-width" *ngIf="isExpanded || isShowing">Test</span>
					<mat-icon class="menu-button" [ngClass]="{'rotated' : showSubSubMenu}" *ngIf="isExpanded || isShowing">expand_more</mat-icon>
				</mat-list-item>
				<div class="submenu" [ngClass]="{'expanded' : showSubSubMenu}" *ngIf="isShowing || isExpanded">
          <mat-list-item>
            <a routerLink="/topupcard">test</a>
            </mat-list-item>
            <mat-list-item>
              <a routerLink="/#">test</a>
              </mat-list-item>
            <h2 matSubheader class="mat-submenu-title"><mat-icon>card_travel</mat-icon> test</h2>
            <mat-list-item>
              <a routerLink="/#">test</a>
              </mat-list-item>
              <mat-list-item>
                <a routerLink="/#">test</a>
                </mat-list-item>
        </div>

			</div>
		</mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

App-header.component.ts

import { Component, ViewChild } from '@angular/core';
import { Http, Response, RequestOptions, Headers } from '@angular/http';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Observable } from 'rxjs/Observable';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { map } from 'rxjs/operators';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

import { MatSidenav } from '@angular/material/sidenav';

@Component({
  selector: 'app-header',
  templateUrl: './app-header.component.html',
  styleUrls: ['./app-header.component.css']
})
export class AppHeader {
 isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
    .pipe(
      map(result => result.matches)
    );

  constructor(private breakpointObserver: BreakpointObserver) {}

  @ViewChild('sidenav') sidenav: MatSidenav;
  isExpanded = true;
  showSubmenu = false;
  isShowing = false;
  showSubSubMenu = false;

  onmouseenter() {
    if (!this.isExpanded) {
      this.isShowing = true;
    }
  }

  onmouseleave() {
    if (!this.isExpanded) {
      this.isShowing = false;
    }
  }

}

Вначале я использовал схемы для его создания, но затем я изменил его, чтобы иметь фронт, как мне хотелось.

У меня естьпытался адаптировать его несколько раз, но количество ошибок, которые он мне дает, настолько много, что я не знаю, с чего начать.У меня мало времени на работу с angular, если кто-то может сказать мне, с чего начать ...

Решение:
Если кто-то еще найдет эту задачу, просто создайте компонент в своем проекте.на основе Stackblitz, затем просто вызовите селектор из вашего проекта (Внутри компонента stackblitz посмотрите на выход маршрутизатора, так как он может вызвать проблемы, я удалил его, и я вызвал его из компонента, который был в моем проекте, и онработало) Остальное - отредактировать CSS компонента Stackblitz, чтобы он адаптировался к вашим потребностям.