I am new to angular 4 projects. So far I found that other answers given for separate navigation bar and render a page, but my one is all content pages are embedded and render within the navigation bar page. so I put <router-outlet> within navigation page, that didn't off nav bar. If I give the <router-outlet> in app-component, it renders pages individually and not within nav bar. My code is below.
index.html
<body>
<app-root></app-root>
</body>
app.component.html
<app-navbar></app-navbar>
<app-loginpage></app-loginpage>
app.module.ts
const appRoutes: Routes = [
{path:'', redirectTo:'/loginpage',pathMatch:'full'},
{ path:'loginpage', component: LoginpageComponent },
{ path:'navbar', component: NavbarComponent },
{ path:'product', component: ProductComponent },];
@NgModule({
declarations: [
AppComponent,
NavbarComponent ,
LoginpageComponent,
ProductComponent,],
imports: [
RouterModule.forRoot(appRoutes),
BrowserModule,
FormsModule,
HttpModule
],
exports: [RouterModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
login.component.html
<div class="login">
<div class="form-group">
<input class="form-control " name="UserName" />
</div>
<div class="form-group">
<input class="form-control " name="password"/>
</div>
<div class="col-md-12 col-md-push-6 text-center">
<a routerLink="/product" routerLinkActive="active"><button id="Enter" class="btn btn-primary btn-block btn-flat fa fa-sign-in" > Log-In</button> </a>
</div>
</div>
navbar.component.html
<body class="hold-transition skin-blue sidebar-mini" id="navigationbar" >
<div class="wrapper " >
<header class="main-header">
(logo desings) </header>
<aside class="main-sidebar">
{nav side bar designs} </aside>
<div class="content-wrapper">
<section class="content admin_table">
<router-outlet></router-outlet>
</section> </div>
<footer class="main-footer">
{footer design}
</footer>
</body>
router link to /product page is a normal page that must be rendered within the navbar page. currently, Product page design is
<p> Product Page Works </p>
Since all answers I searched in stack overflow were available for different nav bar and different content page. But my one is content pages embedded within the nav bar page. Even I tried the answer of this link. As my one is embedded, it hides nav bar for all pages.
