I am creating a starter project for me. What i need to do is create a component in which i call navbar, sidebar, footer and a page that i want to show as router.
This is my app.routing
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LayoutComponent } from './layout/layout.component';
import { LoginComponent } from './screens/auth/login/login.component';
import { StatsComponent } from './screens/stats/stats.component';
const appRoutes: Routes = [
{ path: '', component: LoginComponent },
{ path: 'Dashboard', component: LayoutComponent },
{ path: 'login', component: LoginComponent },
{ path: 'stats', component: StatsComponent }
];
@NgModule({
imports: [RouterModule.forRoot(appRoutes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
I have a simple login page by which i go to dashboard rout
<h1>Angular Router App</h1>
<nav>
<ul>
<li><a routerLink="/Dashboard/login" routerLinkActive="active">Login</a></li>
</ul>
</nav>
This is my LayoutComponent (Dashboard)
<div class="wrapper">
<div class="app-sidebar" data-active-color="white" data-background-color="black" data-image="assets/img/sidebar-bg/01.jpg">
<p>Sidebar</p>
<div class="sidebar-background"></div>
</div>
<!-- <app-navbar></app-navbar> -->
<p>NavBar</p>
<div class="main-panel">
<div class="main-content">
<div class="content-wrapper">
<div class="container-fluid">
<router-outlet></router-outlet>
</div>
</div>
</div>
<!-- <app-footer></app-footer> -->
<p>Footer</p>
</div>
</div>
You can see I have <router-outlet></router-outlet> on this page this I need to know how can I show another component in this? I have a component stats on app-routing. Do I need to show that component inside this layout how can I show this as routing?
Mean something like Dashboard/stats
When you want to use routing in a project you should create the project as follows:
ng new my-project --routing=true
This will create a routing file that you will need, namely app-routing.module.ts
Now to create a route:
ng generate module routes/route-1 --routing=true
This will create new files, in particular:
route-1.module.ts
route-1-routing.module.ts
In route-1-routing.module.ts define routes like so:
const routes: Routes = [
{ path: '', component: Route1Component },
{ path: 'hello', component: HelloComponent }
]
(obviously create these components with something like ng g c routes/route-1/components/route-1 and ng g c routes/route-1/components/hello - these commands are executed on the command line, just like when you use the ng new command)
Now back in app-routing.module.ts add this:
const routes: Routes = [
{
path: 'route-1',
loadChildren: () => import('./routes/route-1/route-1.module').then(m => m.Route1Module)
}
]
now you can visit:
/route-1 in your browser and you will see Route1Component (where <router-outlet></router-outlet> is - don't forget to add router-outlet in app.component.html)
and you can visit:
/route-1/hello in your browser and you will see HelloComponent (again where router-outlet is)
Finally, you can create links to your route using
<a routerLink="/route-1">route-1</a>
<a routerLink="/route-1/hello">route-1/hello</a>
Repeat this process to add more routes.
Much love in Him :D