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. <base 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: http://brianlagunas.com/desktop-to-we…
The Prize: https://www.infragistics.com/products…
