Как расширить компонент в Typescript и выяснить необходимые аргументы? Пример использования: Угловой - расширяющаяся боковая навигация по коврику

Задний план:

Динамика Angular Material Design компонент mat-side-nav такова, что требует следующей структуры:

<mat-sidenav-container>
  <mat-sidenav>
  </mat-sidenav>
  <mat-sidenav-content>
  </mat-sidenav-content>
</mat-sidenav-container>

<mat-sidenav> и <mat-sidenav-content> должны быть прямыми потомками родительского компонента <mat-sidenav-container>. Поэтому, если я хочу создать повторно используемую боковую навигацию в приложении с определенными элементами списка, мне придется сделать следующее:

<mat-sidenav-container>
  <mat-sidenav>
   <app-sidenav></app-sidenav><!--I've just been added-->
  </mat-sidenav>
  <mat-sidenav-content>
  </mat-sidenav-content>
</mat-sidenav-container>

Попытка решения:

Поэтому я пытаюсь расширить компонент <mat-sidenav> в моем компоненте app-sidenav, чтобы его можно было легко повторно использовать во всем приложении, например:

export class SideNavComponent extends MatSidenav implements AfterContentInit { 
//..

constructor() {
  super();
}

Чтобы я мог просто сделать:

<mat-sidenav-container>
  <app-sidenav> <!--I'm now here instead of <mat-sidenav> -->
  </app-sidenav>
  <mat-sidenav-content>
  </mat-sidenav-content>
</mat-sidenav-container>

Проблема: Компилятор машинописного текста будет жаловаться на error TS2554: Expected 6 arguments, but got 0. при попытке расширить MatSidenav.

Вопрос:

1. Зачем, расширяя MatSideNav, мне теперь потребуется 6 аргументов?
2. Есть ли у меня способ узнать, что это за 6 аргументов в этой ситуации и в других подобных ситуациях машинописного текста относительно того, какими должны быть аргументы?

Спасибо, и любые предложения более чем приветствуются.