I am currently facing an issue while trying to display the SuburbDataComponent HTML on the DASHBOARD-SIDE-PANEL-COMPONENT.HTML. When I click on Dashboard, it opens a new window but only displays the SuburbDataComponent.html without showing the side panel. The link is not showing within the router-outlet. Can someone please review the code and identify what may be wrong? Thank you.
*************************
app.Module.ts
*************************
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { FormsModule, ReactiveFormsModule, } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';
import { NgModule } from '@angular/core';
import { DashboardSidePanelComponent } from './user-dashboard/dashboard-side-panel/dashboard-side-panel.component';
import { SuburbsDataComponent } from './user-dashboard/dashboard-side-panel/suburbs-data/suburbs-data.component';
const appRoutes: Routes = [
{ path: '', component: HomepageComponent },
{ path: 'userDashboard', component: DashboardSidePanelComponent },
{ path: 'testData', component: SuburbsDataComponent }
];
@NgModule({
declarations: [
AppComponent,
DashboardSidePanelComponent,
SuburbsDataComponent
],
imports: [
FormsModule,
ReactiveFormsModule,
BrowserModule,
HttpModule,
RouterModule.forRoot(appRoutes)
],
providers: [SuburbsService, AutoCompleteSuburbs, AuthService, AuthGuard],
bootstrap: [AppComponent]
})
export class AppModule { }
*************************
DASHBOARD-SIDE-PANEL-COMPONENT.HTML
*************************
<div class="sidebar">
<ul class="nav nav-sidebar">
<li>
<h3>My Services</h3>
</li>
<li>
<a routerLink="/testData"><span>Dashboard</span></a>
</li>
<li>
<a routerLink="/userDashboard/sending"><i class="fa fa-paper-plane-o fa-lg userDashIcons" aria-hidden="true"></i> <span>Send</span></a>
</li>
<li>
<a href="#"><i class="fa fa-arrow-circle-o-left fa-lg userDashIcons" aria-hidden="true"></i> <span>Receive</span></a>
</li>
<li>
<a href="#"><i class="fa fa-cart-arrow-down fa-lg userDashIcons" aria-hidden="true"></i> <span>Ecommerce</span></a>
</li>
</ul>
</div>
<div class="container-sending">
<router-outlet></router-outlet>
</div>
*************************
DASHBOARD-SIDE-PANEL-COMPONENT.ts
*************************
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-dashboard-side-panel',
templateUrl: './dashboard-side-panel.component.html',
styleUrls: ['./dashboard-side-panel.component.css']
})
export class DashboardSidePanelComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
******************************
SuburbDataComponent.html
******************************
<div class="continerred">
<h1> I AM A TEST WITH RED CONTAINER</h1>
</div>
******************************
SuburbDataComponent.ts
******************************
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-suburbs-data',
templateUrl: './suburbs-data.component.html',
styleUrls: ['./suburbs-data.component.css'],
})
export class SuburbsDataComponent {
constructor () { }
}