Displaying a page within another page using Angular routingTo feature a page within another

Question

Displaying a page within another page using Angular routingTo feature a page within another

I am in the process of building a new project for myself. My goal is to create a component that includes a navbar, sidebar, footer, and a page to be displayed as a router.

Below is my app.routing setup:

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 basic login page which then directs me to the dashboard route.

<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>
     <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>
         <p>Footer</p>
     </div>
 </div>

You'll notice I have

<router-outlet></router-outlet>

on this page. I'm looking to understand how I can display another component within this layout. Specifically, I have a component called stats in my app-routing. How can I show this component within the layout using routing?

For example, something like Dashboard/stats.

angular typescript

Answer 1

Answer №1

When incorporating routing into your project, the first step is to create the project with the following command:

ng new my-project --routing=true

This will generate a necessary routing file named app-routing.module.ts

To add a route, execute the command below:

ng generate module routes/route-1 --routing=true

This action will create additional files, specifically:

route-1.module.ts route-1-routing.module.ts

In route-1-routing.module.ts, define the routes as shown below:

const routes: Routes = [
  { path: '', component: Route1Component },
  { path: 'hello', component: HelloComponent }
]

(Remember to create these components using commands like

ng g c routes/route-1/components/route-1

and

ng g c routes/route-1/components/hello

- similar to the ng new command)

Incorporate the new route in app-routing.module.ts by adding the following:

const routes: Routes = [
  {
    path: 'route-1',
    loadChildren: () => import('./routes/route-1/route-1.module').then(m => m.Route1Module)
  }
]

You can now navigate to:

/route-1 in your browser to view Route1Component (ensure

<router-outlet></router-outlet>

is present - remember to include router-outlet in app.component.html)

and visit:

/route-1/hello to see HelloComponent (again ensure router-outlet is included)

Lastly, you can create links for your routes using:

<a routerLink="/route-1">route-1</a>
<a routerLink="/route-1/hello">route-1/hello</a>

Repeat this process to incorporate additional routes.

Answer 2

When incorporating routing into your project, the first step is to create the project with the following command:

ng new my-project --routing=true

This will generate a necessary routing file named app-routing.module.ts

To add a route, execute the command below:

ng generate module routes/route-1 --routing=true

This action will create additional files, specifically:

route-1.module.ts route-1-routing.module.ts

In route-1-routing.module.ts, define the routes as shown below:

const routes: Routes = [
  { path: '', component: Route1Component },
  { path: 'hello', component: HelloComponent }
]

(Remember to create these components using commands like

ng g c routes/route-1/components/route-1

and

ng g c routes/route-1/components/hello

- similar to the ng new command)

Incorporate the new route in app-routing.module.ts by adding the following:

const routes: Routes = [
  {
    path: 'route-1',
    loadChildren: () => import('./routes/route-1/route-1.module').then(m => m.Route1Module)
  }
]

You can now navigate to:

/route-1 in your browser to view Route1Component (ensure

<router-outlet></router-outlet>

is present - remember to include router-outlet in app.component.html)

and visit:

/route-1/hello to see HelloComponent (again ensure router-outlet is included)

Lastly, you can create links for your routes using:

<a routerLink="/route-1">route-1</a>
<a routerLink="/route-1/hello">route-1/hello</a>

Repeat this process to incorporate additional routes.

Displaying a page within another page using Angular routingTo feature a page within another

Answer №1

Similar questions

Error when accessing JSON property in Angular with Ionic 2: A Strange TypeError

What is the best way to dynamically determine the base path for my templates in Angular 2?

Working with objects in *ngFor in Ionic 2

How to send empty values in Angular4 HTTP post request to web API

A guide to showcasing data within PrimeNG's pie chart component using either JavaScript or Angular

Incorporating Bloodhound into an Angular 2 CLI project

Showing the AngularFireList data on the HTML page following successful retrieval

Combine arrays using union or intersection to generate a new array

Angular: Extracting data from mat select by id

Exploring the use of TypeScript and Webpack to read non-JavaScript files in Node.js

Is there a way to configure the location of a dialogue box beneath the button click action in every row within a Mat table?

Encapsulating functions with multiple definitions in Typescript

Innovative feature: Customizable dropdown options in PrimeNg for Angular 4

Event-Propagation in Angular 5 with mat-expansion-panel within another component

Switching an application from Angular 5 to Angular 8 can lead to unexpected styling problems

Encountering an issue in an Angular project where it remains stuck at the preloader stage

Utilize the data emitted by an Observable to produce a new Observable

Exploring SVG Graphics, Images, and Icons with Nativescript-vue

Error: The `ngMetadataName` property cannot be accessed because it is undefined or null in Internet Explorer version 10

Unable to render information within the PrimeNG tree component