Unable to open home page of sidenav - css

Question

I am using angular material design for making a website where I am unable to open home of side-bar. Please suggest me any solution.
https://stackblitz.com/edit/webkotactechsan-akntkf
used angular material design
<mat-nav-list>
<mat-card class="sidemenu">
<mat-list-item routerLink="home" routerLinkActive="active" >
<button mat-mini-fab color="primary" aria-label="Example icon-
button">
<mat-icon>home</mat-icon>
</button>
<span class="title"><b>Home</b></span>
</mat-list-item>
</mat-card>
unable to open home of side-bar

Answer 1

changes you need to do
change class name to export class HomeComponent in home.component.ts
spelling of home.component.scss is wrong, please correct it.
app.module.ts
import 'hammerjs';
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { FormsModule } from '#angular/forms';
import { RouterModule, Routes } from '#angular/router';
import { AppMaterialModule } from './app.material.module';
import { AppComponent, DialogContentComponent } from './app.component';
import { HomeComponent } from './home/home.component'
const appRoute: Routes = [
{ path: 'home', component: HomeComponent }
];
#NgModule({
imports: [
BrowserModule,
FormsModule,
AppMaterialModule,
BrowserAnimationsModule,
RouterModule.forRoot(appRoute)
],
declarations: [AppComponent, DialogContentComponent, HomeComponent],
entryComponents: [DialogContentComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
Changes I did in this file.
a) - added import { RouterModule, Routes } from '#angular/router';
b) - added import { HomeComponent } from './home/home.component'
c) -
const appRoute: Routes = [
{ path: 'home', component: HomeComponent }
]
;
d) - added RouterModule.forRoot(appRoute).
e) - added HomeComponent in declarations.
Then add <router-outlet></router-outlet> in your app.component.html.
Let me know if you have any doubt.

Answer 2

Please add routes in AppModule
RouterModule.forRoot([
{ path: 'home', component: HomeComponent },
{ path: '', redirectTo: 'home', pathMatch: 'full' },
],{onSameUrlNavigation: 'reload'}),

Answer 3

Live Example: Stackblitz
There is something you need to do to solve this problem and implement some angular way to manage components
1. Implement routing: The reason behind it, when you click on home, you need to go some router. So, we implement routing to solve this problem.
const appRoute: Routes = [
{ path: '', pathMatch: 'full', redirectTo: 'home'},
{ path: 'home', component: HomeComponent },
{ path: 'birthday', component: BirthdayComponent}
];
In the above code, we took two components for example purpose. When we call that route, it loads that component. For example we go home route it loads home component.
2. Divide into components: We are implementing single page application. So, we don't need to copy and paste all the sidenav, topbar in all components.
We kept those sidenav and topbar in app components and load app-content into router-outlet. you can see your inside codes of app-component in home and birthday component.
<div class="app-content">
<router-outlet></router-outlet>
</div>
3. Change routerLink to home and birthday, so that we need to show home, it loads home components and when we need to show birthday, it loads birthday component.
and finally thanks to piyush jain for solving common mistakes of your code.