I took some code from another repository and decided to start my project using the already provided parent and child component in that repository. In the repository that I took there is a main component which is parent component while it's children are login, register and about component. Moving on, there is a navbar design in main component which is appearing on every other child page. The parent component is also the start up page so whenever I run the applicantion the main Component gets triggered. Now i need to design a homepage and I want that page to be the startup page and user should be able to navigate from that page to the other pages like sign in,register etc. But if I change the maiComponent to homeComponent in app.routing module then the homepage does appear in.startup but the navbar design disappears. If I make the homepage as a child component then how can I also make it to appear on startup?
app-routing.module.ts file
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { UserComponent } from './main/user/user.component';
import { NavComponent } from './main/nav/nav.component';
import { AboutComponent } from './main/about/about.component';
import { RegisterComponent } from './main/register/register.component';
import { AddarticleComponent } from './dashbord/addarticle/addarticle.component';
import { DashbordComponent } from './dashbord/dashbord.component';
import { NavigationComponent } from './dashbord/navigation/navigation.component';
import { MainComponent } from './main/main.component';
import { HomeComponent } from './main/home/home.component';
const routes: Routes = [
{
path: '', component: MainComponent, children:
[
{ path: 'home', component: HomeComponent },
{ path: 'login', component: UserComponent },
{ path: 'about', component: AboutComponent },
{ path: 'register', component: RegisterComponent }
]
},
{
path: 'dashboard', component: DashbordComponent, children: [
{ path: 'addarticle', component: AddarticleComponent }
]
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
main.component.html
<ng2-slim-loading-bar color="blue"></ng2-slim-loading-bar>
<div id="wrapper" class="animate">
<nav class="navbar header-top fixed-top navbar-expand-lg navbar-light bg-light">
<span class="navbar-toggler-icon leftmenutrigger"></span>
<a class="navbar-brand" href="#">LOGO</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav animate side-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Side Menu Items</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
<ul class="navbar-nav ml-md-auto d-md-flex">
<li class="nav-item">
<a class="nav-link"routerLink="" routerLinkActive="active">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link"routerLink="/login" routerLinkActive="active">Login
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/register" routerLinkActive="active">Register</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/about" routerLinkActive="active">About Us</a>
</li>
</ul>
</div>
</nav>
</div>
I need the home component as my home page but i want the navbar in mian component to appear on all components that are currently present and in the future components too. How can i fix this?
