Create Routing, Navigation and Inner Page - Angular 6 / Angular 7

Posted at: December 15, 2018 4:52 PM

Show component on only Home Page

Show only banner and featured blog post on home page.

Edit file src/app/app.component.ts

import Router and set router variable in constructor as public like this constructor(public router: Router) {}

Edit file src/app/app.component.html

check banner and featured component on home page.

Root Routing Module

Edit file src/app/app-routing.module.ts

Import component PageNotFoundComponent for set route of home page and 404 error page (page not found).

Set route for home page {path: '', redirectTo: '', pathMatch: 'full'}

Set route for 404 error page {path: '**', component: PageNotFoundComponent}

Child Route blogpost-routing.module.ts

Edit file src/app/blogpost/blogpost-routing.module.ts

Import component BlogpostListComponent and BlogpostDetailComponent for set route of blog listing and blog detail page.

Add id parameter for getting single blog record from server.

Child Route cmspage-routing.module.ts

Edit file src/app/cmspage/cmspage-routing.module.ts

Import component PageComponent and ContactFormComponent for set route of static pages like as about, service etc. and contact form page.

In page route, added parameter slug for getting single page from server

Root Module app.module.ts

All modules like as BlogpostModule and CmspageModule should be imported in app.module.ts

All modules should be imports array before AppRoutingModule. Sequence is important.

Change link in Header component

Edit file src/app/header/header.component.html for add routerLink and routerLinkActive respectively menu link and active class.

Theme integration of blog listing page

Edit file src/app/blogpost/blogpost-list/blogpost-list.component.ts for add title

Edit src/app/blogpost/blogpost-list/blogpost-list.component.html

Theme integration of blog detail page

Edit file src/app/blogpost/blogpost-detail/blogpost-detail.component.html

Also load two components app-blogpost-recent and app-categories on this page for showing recent post and categories.

Theme integration of recent blog post

Edit src/app/blogpost/blogpost-recent/blogpost-recent.component.html

Theme integration of categories listing

Edit src/app/blogpost/categories/categories.component.html

Theme integration of cms pages

Edit src/app/cmspage/page/page.component.html

Static pages like as about, service etc.

Theme integration of contact form page

Edit src/app/cmspage/contact-form/contact-form.component.html

Theme integration of 404 page

Edit component file src/app/page-not-found/page-not-found.component.ts

Import Rotuer and create founction gotoHome() for navigate home page.

Edit component file src/app/page-not-found/page-not-found.component.html

Call gotoHome() on click button Go to Home

This lesson also available on YouTube
Routing Navigation 404 Page

More Posts - Angular Project Training

Download Theme
Download Web API
Download Angular App
Watch Video for Project Setup
Watch Videos of More Tutorials

Angular 6/7 Tutorial in Hindi

Angular 7 is a JavaScript based framework for building web applications and apps in JavaScript, html, and TypeScript, which is a superset of JavaScript, used to create Single Page Applications.

truecodex.com provides video tutorial for enough understanding of all the necessary components of Angular 6 and Angular 7.

truecodex.com will keep uploading videos of the latest features of Angular. Please subscribe my channel for latest videos.

Angular 6 / Angular 7 Tutorial in Hindi

Please leave comments

5 Comments