How to use router in angular 7

In my previous post, I mentioned application structure victimization Angular modules, and established the groundwork for victimization core, shared and have modules. during this post, I'll demonstrate a way to setup basic routing in associate Angular application victimization Angular Router Modules.

**If you're following in conjunction with the tutorial, I even have additional bootstrap to the applying. I even have written concerning adding bootstrap to associate angular application here: victimization Bootstrap four with Angular

**If you're not following on, I presently have associate Angular CLI generated an application with a core module additional during which we tend to are aiming to place the remainder of our application content.

Before we tend to jump in, here are some links to different Angular Tutorials I’ve place together:

Angular Tutorial: obtaining started with the Angular CLI

Angular part Tutorial: Inputs, Outputs, and EventEmitters

Angular part Lifecycle

Angular Module Tutorial: Application Structure victimization Modules

Using Bootstrap four with Angular

Electron Tutorial: obtaining started with negatron and Angular CLI

So, let’s start with this Angular Router tutorial.

Generate parts

First, we tend to are aiming to want some extra parts within the application. Let’s add a dashboard, sidebar, and banner:

• ng g part core/dashboard
• ng g part core/sidebar
• ng g part core/banner

These parts ought to be added underneath the core/ folder and declared in our CoreModule. Since these are root parts for our CoreModule we tend to don’t ought to produce a feature module for them. Next, we tend to are aiming to established our application routing, we are going to come to those parts shortly.

Create and Setup AppRoutingModule

The first factor we are going to ought to do is add associate AppRoutingModule to outline our root routes. during a previous post, we tend to have placed our core part selector in our app.component.html. rather than victimization the selector, we are going to set up routing and use routing to show our CoreComponent in app.component.html employing a RouterOutlet

Angular.io documentation defines a RouterOutlet as “a placeholder that Angular dynamically fills supported the present router state”. https://angular.io/api/router/RouterOutlet

To do so, do the following:

If you are following on from previous posts, replace with within app.component.html. Otherwise, replace the content in app.component.html with.

Create a file known as app-routing.module.ts at a similar level because of the AppComponent

In the future, once you produce a feature module that's aiming to have routing. Use a --routing flag with the generate command and this file are created for you.

Add the subsequent code to app-routing.modules.ts

Create 

Home component

About component

Add component class in app.routing.module.ts file

app.component.html

<h1>{{title}}</h1>

<nav>

<a routerLink="/home">home</a> //

<a routerLink='/about'>about</a>

</nav>

<router-outlet></router-outlet>

app-routing.module.ts

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

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

import {AboutComponent} from './about/about.component';

import{HomeComponent} from './home/home.component';

import {ContactComponent} from './contact/contact.component';

const routes: Routes = [ { path: '', redirectTo: '/home', pathMatch: 'full' },

{path:'home', component:HomeComponent},

{path:'about', component:AboutComponent},

{path:'contact', component:ContactComponent}];

@NgModule({

imports: [RouterModule.forRoot(routes)],

exports: [RouterModule]

})

export class AppRoutingModule { }

Result