navigate to different component angular code example
Example 1: redirect angular
import { RoleComponent } from './role/role.component';
import { AppComponent } from './app.component';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{ path: '', redirectTo: '/AppComponent', pathMatch: 'full' },
{ path: 'role', component: RoleComponent },
];
@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule {
constructor(private router: Router)
}
functionOnWhichRedirectShouldHappen(){
router.navigate(['/role']);
}
Example 2: angular navigate using component
import { Router } from '@angular/router';
...
export class AboutUserComponent implements OnInit {
user: User;
constructor(
private route: ActivatedRoute,
private service: UserService,
private router: Router
) {}
ngOnInit() {
let username = this.route.snapshot.params['username'];
this.service.getUser(username).then(user => this.user = user);
}
goBack() {
this.router.navigate(['/about']);
}
}
Example 3: angular navigate using component
import {Router} from '@angular/router';
export class Component{
constructor(private route:Router){}
go(){
this.route.navigate(['/page']);
}
}