generate module with routing in angular
ng g m [ModuleName] --routinggenerate module with routing in angular
ng g m [ModuleName] --routingangular navigate using component
import {Router} from '@angular/router'; // import router from angular router
export class Component{ // Example component..
constructor(private route:Router){}
go(){
this.route.navigate(['/page']); // navigate to other page
}
}angular router
const routes: Routes = [
{ path: '', redirectTo: '/first-component', pathMatch: 'full' }, // redirect to `first-component`
{ path: 'first-component', component: FirstComponent },
{ path: 'second-component', component: SecondComponent },
{ path: '**', component: PageNotFoundComponent }, // Wildcard route for a 404 page
];ng router link
<a [routerLink]="['/user/bob']" [queryParams]="{debug: true}" fragment="education">
link to user component
</a>add component in angular router
First you need to make component using 'ng generate'
$ ng generate component home
$ ng generate component about
Next, in the src/app/app-routing.module.ts file import the components as follows:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
Next, add the routes as follows:
const routes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent }
];
So now if you visit the /home path you should go to home component and if you visit the /about path you should go to the about component.
/*
I hope it will help you.
Namaste
Stay Home Stay Safe
*/angular routing
// create a new project with routing enabled
ng new routing-app --routingCopyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
