How to use router in angular 7

Please log in or register to like posts.
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 set up 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

Reactions

0
0
0
0
0
0
Already reacted for this post.

Reactions

Leave a Reply

Your email address will not be published. Required fields are marked *