# Angular Routing

• Create Route(s)
• Add Router Links
• Redirecting Router.navigate()
  • Passing Parameters
• Additional Resources

# Create Route(s)

// app/app.routes.ts
import { Routes } from '@angular/router';

export const routes: Routes = [
  {
        path: '',
        redirectTo: 'login',
        pathMatch: 'full'
    },
    {
        path: 'login', loadComponent: () => import('./login/login.component')
            .then(mod => mod.LoginComponent)
    },
];

# Add Router Links

To navigate as a result of an action such as the click of an anchor tag, use RouterLink.

Make sure you import RouterLink into app/app.component.ts

// app/app.component.ts
import { RouterLink, RouterOutlet } from '@angular/router';

<!-- app/app.component.html -->
<a routerLink="/login"> Login </a>

# Redirecting Router.navigate()

constructor(private router: Router) { }

redirectHome(url) {
  this.router.navigate(['/home']);
}

# Passing Parameters

this.router.navigate(['/user', { id: userId }]);

# Additional Resources

• Routing Overview
• Router Reference