Learn Angular: Angular Route Navigation

Описание: Want to learn Angular? In this video, "Learn Angular: Angular Route Navigation", you'll learn how to use Angular route navigation to navigate in components in your Angular application.

Navigation may be considered on of the most important concepts in an Angular 9 application. Luckily, route navigation is extremely easy to implement. Implementing basic route navigation in Angular 9 requires just a few steps.

Step 1:
Make sure that your index.html file has a Base element defined with a "/" as the href.

Step 2:
Next, you must have Angular components to navigate to. Create a couple of components that you can use for navigation. In this sample, we created components for "users' and "products" using the following commands

"ng g c users"
"ng g c products"

Step 3:
Now, open your app.module.ts file and import the RouterModule from the @angular/router package.

import { RouterModule } from '@angular/router'

In the imports array of the ngModule decorator, add the following code:

RouterModule.forRoot([

])

Step 4:
Define your routes for your navigation

RouterModule.forRoot([
{ path: "products", component: ProductsComponent},
{ path: "users", component: UsersComponent},
])

Step 5:
Add the "router-outlet" directive to your template. The RouterOutlet is a directive from the router library that is used like a component. It acts as a placeholder that marks the spot in the template where the router should display the components for that outlet.

router-outlet /router-outlet

Step 6:
In order to perform the navigation based on user interaction, use the "routerLink" directive on your buttons or links.

div
button routerLink="/products" Nav to Products /button
button routerLink="/users" Nav to Users /button
/div

"Desktop to Web: A WPF Developers Guide to Learning Angular" is a video tutorial series that will help you take your WPF and WinForms desktop coding skill to the web with Angular. This series will help you understand how your current desktop skills map directly to concepts in Angular to make your learning path to the web as easy and painless as possible.

During each video in this series I will be giving away a one year subscription to Infragistics Ultimate valued at $1,995 USD. Simply subscribe to my channel, like the video, and leave a comment to be entered. Winners are announced in the next video in the series.

Official contest rules: https://brianlagunas.com/desktop-to-w...

The Prize: https://www.infragistics.com/products...

Follow Me:
Twitter:   / brianlagunas  
Twitch:   / brianlagunas  
Blog: http://brianlagunas.com
GitHub: https://github.com/brianlagunas

Sponsor Me:
https://github.com/sponsors/brianlagunas