Material Dashboard not showing up inside the Navigation Schematic when using routerLink in Angular 7

Question

Hi I am trying to add a Navigation Schematic in my project in which the first link will show the dashboard, so when the page is displayed first it should show the dashboard. Later I will add additional links. The issue is when I try to add the Dashboard component using routerLink inside the Navigation Schematic link it never displays the Dashboard. However when I call the dashboard component directly inside my app.component.html it displays the dashboard correctly.

Please note the exact same way works and displays the dashboard in Angular 6

I have tried all possible combinations for routerLink but it does not work

Here is how I have configured app.module.ts

import { Routes, RouterModule } from '@angular/router';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { LayoutModule } from '@angular/cdk/layout';
import { MatToolbarModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule, MatGridListModule, MatCardModule, MatMenuModule, MatTableModule, MatPaginatorModule, MatSortModule } from '@angular/material';
import { AdminConsoleNavComponent } from './admin-console-nav/admin-console-nav.component';
import { AdminConsoleDashboardComponent } from './admin-console-dashboard/admin-console-dashboard.component';

const appRoutes: Routes = [
  { path: '', component: AdminConsoleDashboardComponent }  
]

@NgModule({
  declarations: [
    AppComponent,
    AdminConsoleNavComponent,
    AdminConsoleDashboardComponent        
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    LayoutModule,
    MatToolbarModule,
    MatButtonModule,
    MatSidenavModule,
    MatIconModule,
    MatListModule,
    MatGridListModule,
    MatCardModule,
    MatMenuModule,
    RouterModule.forRoot(appRoutes),
    MatTableModule,
    MatPaginatorModule,
    MatSortModule    
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

My Navigation Component html looks like this

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav
    #drawer
    class="sidenav"
    fixedInViewport="true"
    [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'over' : 'side'"
    [opened]="!(isHandset$ | async)">
    <mat-toolbar color="primary">Menu</mat-toolbar>
    <mat-nav-list>
        <a mat-list-item routerLink = "/">Dashboard</a>
      <a mat-list-item href="#">Link 2</a>
      <a mat-list-item href="#">Link 3</a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar color="primary">
      <button
        type="button"
        aria-label="Toggle sidenav"
        mat-icon-button
        (click)="drawer.toggle()"
        *ngIf="isHandset$ | async">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <span>mock-admin-console</span>
    </mat-toolbar>
    <!-- Add Content Here -->
  </mat-sidenav-content>
</mat-sidenav-container>

Inside the app.component.html

<app-admin-console-nav>
    <router-outlet></router-outlet>
</app-admin-console-nav>

Expected Result - Dashboard should show up with Nav Menu as the path given is '' and it should default to the Dashboard

Actual Result - The Nav Menu Shows up but not the dashboard. when I click on the link nothing happens

Alright, guys, I resolved the issue. So anybody who encounters the same in the future, just remember to add the dashboard component name in the Nav bar html where it is written So replace "add content here" with or ng-Content will also work. Sometimes the simple things appear the hardest to do. But anyways now you know. — Nil.G, Apr 05 '19 at 04:41

Cristian Castro Arias · Answer 1 · 2023-03-01T01:08:08.910

0

you are missing the following tag under Add Content Here :

<ng-content></ng-content>

edited Mar 01 '23 at 01:08

answered Mar 01 '23 at 00:58

Cristian Castro Arias

1
1

Material Dashboard not showing up inside the Navigation Schematic when using routerLink in Angular 7

1 Answers1