Build Angular 6 Template with Routing and Navigation


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 {

	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}}

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 {

	data2: string;

	ngOnInit() {
		this.data2 = 'Hello About Us Page';
	}

}

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

<h3>About Us Page</h3>
{{data2}}

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}}




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 { NewsComponent } from './components/news/news.component';

const routes: Routes = [
	{ path: '', component: HomeComponent },
	{ path: 'home', component: HomeComponent },
	{ path: 'aboutus', component: AboutUsComponent },
	{ path: 'news', component: NewsComponent },
	{ 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]="['/aboutus']">About Us</a> |
<a [routerLink]="['/news']">News</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 { AboutUsComponent } from './components/aboutus/aboutus.component';
import { NewsComponent } from './components/news/news.component';

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

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutUsComponent,
    NewsComponent
  ],
  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: