Issue
I've been struggling to put app inside Main content area. My apps do not show inside of Main content area. This is my Github https://github.com/FlameDickyHead/Electric-Device-Borrowing-Website/tree/master
** I set up my login page as a default. Basically you have to login first to get into dashboard.
This is my dashboard.component.html
<mat-toolbar>
<button mat-icon-button *ngIf="sidenav.mode =='over'" (click)="sidenav.toggle()">
<mat-icon *ngIf="!sidenav.opened">menu</mat-icon>
<mat-icon *ngIf="sidenav.opened">close</mat-icon>
</button>
Electric Devices Borrowing Website
<button mat-button (click)="logout()">
<mat-icon>logout</mat-icon>
Logout
</button>
</mat-toolbar>
<mat-sidenav-container>
<mat-sidenav #sidenav="matSidenav">
<img width="100" height="100" class="avatar mat-elevation-z8" src="assets/image/logoproject.png">
<h4 class="name">EDBW Company</h4>
<mat-divider></mat-divider>
<button mat-button class="menu-button" (click)="home()">
<mat-icon>home</mat-icon>
<span>Home</span>
</button>
<button mat-button class="menu-button" (click)="employee()">
<mat-icon>person</mat-icon>
<span>Employees</span>
</button>
<button mat-button class="menu-button">
<mat-icon>add_shopping_cart</mat-icon>
<span>Borrowing Devices</span>
</button>
<button mat-button class="menu-button">
<mat-icon>backspace</mat-icon>
<span>Returning Devices</span>
</button>
<button mat-button class="menu-button">
<mat-icon>list_alt</mat-icon>
<span>Status Tables</span>
</button>
<br /><br /><br />
<mat-divider></mat-divider>
<button mat-button class="menu-button">
<mat-icon>info</mat-icon>
<span>About us</span>
</button>
<button mat-button class="menu-button">
<mat-icon>help</mat-icon>
<span>Help</span>
</button>
</mat-sidenav>
<mat-sidenav-content>
<div class="content mat-elevation-z4">
Main Content
<router-outlet></router-outlet>
</div>
</mat-sidenav-content>
</mat-sidenav-container>
This is my dashboard.component.ts Updated
home() {
this.router.navigate(['/dashboard/home']);
}
employee(){
this.router.navigate(['/dashboard/employee']);
}
}
This is my app-routing.module.ts Updated
const routes: Routes = [
{path: '', redirectTo:'login', pathMatch:'full'},
{path: 'login', component : LoginComponent},
{
path: 'dashboard',
component: DashboardComponent,
children: [
{
path: 'home',
component: HomeComponent,
},
{
path: 'employee',
component: EmployeeComponent,
},
{
path: 'borrow-device',
component: BorrowComponent,
},
{
path: 'return-device',
component: ReturnComponent,
},
{
path: 'status-table',
component: StatusComponent,
},
{
path: 'about-us',
component: AboutUsComponent,
},
{
path: 'help',
component: HelpComponent,
},
],
},
{path: 'register', component : RegisterComponent},
{path: 'forgot-password', component : ForgotPasswordComponent},
{path: 'verify-email', component : VerifyEmailComponent},
];
This is my app.component.html
<router-outlet></router-outlet>
Solution
You have 2 nested router-outlets
. One is inside app.component.html
, the other one is inside dashboard.component.html
. Unfortunately this nested structure is not represented in you route config.
In order to render data at this nested router-outlet
, you have do define child routes of you dashboard route:
{
path: 'dashboard',
component: DashboardComponent,
children: [
{
path: 'I-Am-Nested',
component: WhatEverComponentYouWantToRender,
},
],
},
Since I don't know which components should be rendered inside your main-content, you can use it as a template, but have to adjust the component and path yourself.
Answered By - Fabian Strathaus
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.