Nested Routes with Routing and Navigation in Angular 6

Home » MEAN Stack » Angular 6 » Nested Routes with Routing and Navigation in Angular 6
18 Aug, 2018 Categories: Angular 6


Create New Project

Create new folder named learnangular5withrealapps and select to this folder in Visual Studio Code

Install Angular 6

Open Terminal windows in Visual Studio Code and type: npm install -g @angular/cli to install Angular 6

Structure of Project




Create Children Components

Create new folder, named components in src\app folder. In this folder, create children components as below:

Home Component

Create new folder named home in src\app\components folder. In this folder, create new TypeScript file named home.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
	templateUrl: 'home.component.html'
})

export class HomeComponent implements OnInit {

	data1: string;

	ngOnInit() {
		this.data1 = 'Hello Home Page';
	}

}

Create new file, named home.component.html contains html for home page

<h3>Home Page</h3>
{{data1}}

About Us Component

Create new folder named aboutus in src\app\components folder. In this folder, create new TypeScript file named aboutus.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
	templateUrl: 'aboutus.component.html'
})

export class AboutUsComponent implements OnInit {

	ngOnInit() {
	}

}

Create new file, named aboutus.component.html contains html for about us page

<h3>About Us Page</h3>
<a [routerLink]="['/aboutus/about-us-menu-1']">Menu 1</a> |
<a [routerLink]="['/aboutus/about-us-menu-2']">Menu 2</a>
<router-outlet></router-outlet>

Create Children Menus in About Us Page

Create new folder named components in src\app\components\aboutus folder. In this folder, create children components as below:

Menu 1 Children Component

Create new folder named menu1 in src\app\components\aboutus\components folder. In this folder, create new TypeScript file named menu1.aboutus.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
	templateUrl: 'menu1.aboutus.component.html'
})

export class Menu1AboutUsComponent implements OnInit {

	ngOnInit() {
	}

}

Create new file, named menu1.aboutus.component.html contains html for menu 1 page

<h4>Menu 1 is selected</h4>

Menu 2 Children Component

Create new folder named menu2 in src\app\components\aboutus\components folder. In this folder, create new TypeScript file named menu2.aboutus.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
	templateUrl: 'menu2.aboutus.component.html'
})

export class Menu2AboutUsComponent implements OnInit {

	ngOnInit() {
	}

}

Create new file, named menu2.aboutus.component.html contains html for menu 2 page

<h4>Menu 2 is selected</h4>

News Component

Create new folder named news in src\app\components folder. In this folder, create new TypeScript file named news.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
	templateUrl: 'news.component.html'
})

export class NewsComponent implements OnInit {

	data3: string;

	ngOnInit() {
		this.data3 = 'Hello News Page';
	}

}

Create new file, named news.component.html contains html for news page

<h3>News Page</h3>
{{data3}}




Define Routing

Create new TypeScript file, named app.routing.ts in src\app folder. This file contains routes of urls in template

import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './components/home/home.component';
import { AboutUsComponent } from './components/aboutus/aboutus.component';
import { Menu1AboutUsComponent } from './components/aboutus/components/menu1/menu1.aboutus.component';
import { Menu2AboutUsComponent } from './components/aboutus/components/menu2/menu2.aboutus.component';
import { NewsComponent } from './components/news/news.component';

const routes: Routes = [
	{ path: '', component: HomeComponent },
	{ path: 'home', component: HomeComponent },
	{ path: 'aboutus', component: AboutUsComponent,
		children: [
			{ path: '', redirectTo: 'home', pathMatch: 'full' },
			{ path: 'about-us-menu-1', component: Menu1AboutUsComponent },
			{ path: 'about-us-menu-2', component: Menu2AboutUsComponent }
		]
	},
	{ path: 'news', component: NewsComponent },
	{ path: '**', redirectTo: '' }
];

export const routing = RouterModule.forRoot(routes);

Create Main Component

Create new TypeScript file, named app.component.ts in src\app folder.

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})

export class AppComponent implements OnInit {

    ngOnInit() {
    }

}

Create HTML Template

Create new file, named app.component.html in src\app folder. This file is html template for application

<a [routerLink]="['/home']">Home</a> |
<a [routerLink]="['/aboutus']">About Us</a> |
<a [routerLink]="['/news']">News</a>
<br><br>
<router-outlet></router-outlet>
<br><br>
Copyright PMK Lab

Add Components and Routing to Module

In app.module.ts file in src\app folder. Add components and routing to module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HomeComponent } from './components/home/home.component';
import { AboutUsComponent } from './components/aboutus/aboutus.component';
import { Menu1AboutUsComponent } from './components/aboutus/components/menu1/menu1.aboutus.component';
import { Menu2AboutUsComponent } from './components/aboutus/components/menu2/menu2.aboutus.component';
import { NewsComponent } from './components/news/news.component';

import { routing } from './app.routing';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutUsComponent,
    Menu1AboutUsComponent,
    Menu2AboutUsComponent,
    NewsComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    routing
  ],
  providers: [
  ],
  bootstrap: [AppComponent]
})

export class AppModule { }

Run Application

In Terminal windows in Visual Studio Code and type: ng serve –open, program will open url http://localhost:4200/ on browser




Output

Home Page

About Us Page

Menu 1 in About Us Page

Menu 2 in About Us Page

News Page

References

I recommend you refer to the books below to learn more about the knowledge in this article:


Tags

Related Posts

Top