Background:
The Angular Material Design component known as mat-side-nav operates in a specific structure for its dynamics:
<mat-sidenav-container>
<mat-sidenav>
</mat-sidenav>
<mat-sidenav-content>
</mat-sidenav-content>
</mat-sidenav-container>
<mat-sidenav> and <mat-sidenav-content> must directly stem from the parent component <mat-sidenav-container>. This means that to create a reusable side navigation with defined list items, one must follow this structure:
<mat-sidenav-container>
<mat-sidenav>
<app-sidenav></app-sidenav><!--This is the new addition-->
</mat-sidenav>
<mat-sidenav-content>
</mat-sidenav-content>
</mat-sidenav-container>
Attempted Solution:
Hence, the aim is to extend the functionality of the <mat-sidenav> component within the app-sidenav component for easy reuse across the application like so:
export class SideNavComponent extends MatSidenav implements AfterContentInit {
//..
constructor() {
super();
}
This would allow for a simpler implementation in the code:
<mat-sidenav-container>
<app-sidenav> <!--Now using <app-sidenav> instead of <mat-sidenav> -->
</app-sidenav>
<mat-sidenav-content>
</mat-sidenav-content>
</mat-sidenav-container>
Issue: Upon attempting to extend MatSidenav, an error is thrown stating
error TS2554: Expected 6 arguments, but got 0.Question:
- Why does extending MatSideNav suddenly require 6 arguments?
- How can one determine what these 6 arguments should be in such TypeScript scenarios and others similar typescript situations?
Your insights and suggestions are greatly valued. Thank you!