Route Parameters with Routing and Navigation in Angular 6

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

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

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

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 {

	ngOnInit() {
	}

}

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

<h3>Use Route Parameters</h3>

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

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

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

export class OneParameterComponent implements OnInit {

	id: string;

	constructor(
		private activatedRoute: ActivatedRoute
	) {}

	ngOnInit() {
		this.id = this.activatedRoute.snapshot.params.id;
	}

}

Create new file, named oneparameter.component.html contains html for one parameter page

<h3>Use One Parameter</h3>
Id: {{id}}

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

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

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

export class MoreParametersComponent implements OnInit {

	id: string;
	id2: number;

	constructor(
		private activatedRoute: ActivatedRoute
	) { }

	ngOnInit() {
		this.activatedRoute.paramMap.subscribe(params => {
			this.id = params.get('id');
			this.id2 = parseInt(params.get('id2'));
		});
	}

}

Create new file, named moreparameters.component.html contains html for more parameters page

<h3>Use More Parameters</h3>
Id: {{id}}
<br>
Id2: {{id2}}

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 { OneParameterComponent } from './components/oneparameter/oneparameter.component';
import { MoreParametersComponent } from './components/moreparameters/moreparameters.component';

const routes: Routes = [
	{ path: '', component: HomeComponent },
	{ path: 'home', component: HomeComponent },
	{ path: 'one-parameter', component: OneParameterComponent },
	{ path: 'more-parameters', component: MoreParametersComponent },
	{ path: '**', redirectTo: '' }
];

export const routing = RouterModule.forRoot(routes);

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 new file, named app.component.html in src\app folder. This file is html template for application

<a [routerLink]="['/home']">Home</a> |
<a [routerLink]="['/one-parameter', {id: 'p01' }]">One Parameter</a> |
<a [routerLink]="['/more-parameters', {id: 'p02', id2: 123 }]">More Parameters</a>
<br><br>
<router-outlet></router-outlet>
<br><br>
Copyright PMK Lab

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 { OneParameterComponent } from './components/oneparameter/oneparameter.component';
import { MoreParametersComponent } from './components/moreparameters/moreparameters.component';

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

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    OneParameterComponent,
    MoreParametersComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    routing
  ],
  providers: [
  ],
  bootstrap: [AppComponent]
})

export class AppModule { }

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

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

Route Parameters with Routing and Navigation in Angular 6

Create New Project

Install Angular 6

Structure of Project

Create Children Components

Home Component

One Parameter Component

More Parameters Component

Define Routing

Create Main Component

Create HTML Template

Add Components and Routing to Module

Run Application

Output

Home Page

One Parameter Page

More Parameters Page

References