Angular how to show page on other page as router

user_12791644 0
Viewed 336

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

angular typescript
1 Answers

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

user_12058710
Related