![Navigate to a new page
• Create new component
ng generate component Democracy
• Add a route in app-routing.module.ts
{ path: 'democracy', component: DemocracyComponent }
• Add a link in the menu in app.component.html
<a [routerLink]="'democracy'">Who will sit on Iron Throne?</a>
Join the Conversation #AngularHackDay @jernej_kavka](https://image.slidesharecdn.com/2019-melbourne-nghackday-190622023259/85/Angular-Routing-Angular-Hack-Day-Melbourne-2019-9-320.jpg)
![Navigate with arguments
• Add routing to Iron Throne page
• { path: 'iron-throne/:id', component: IronThroneComponent }
• Add a link to Irone Throne page
• <a [routerLink]="['/iron-throne', character.id]">
• Get the character ID
• In constructor: private route: ActivatedRoute
• const id = this.route.snapshot.paramMap.get('id');
• Display the character as the rightful ruler
Join the Conversation #AngularHackDay @jernej_kavka](https://image.slidesharecdn.com/2019-melbourne-nghackday-190622023259/85/Angular-Routing-Angular-Hack-Day-Melbourne-2019-11-320.jpg)
![Other ways to navigate
• In HTML:
• <a [routerLink]="['/iron-throne', character.id]">
• In Code:
• In constructor: private router: Router
• this.router.navigate(['/iron-throne’, character.id]);
Join the Conversation #AngularHackDay @jernej_kavka](https://image.slidesharecdn.com/2019-melbourne-nghackday-190622023259/85/Angular-Routing-Angular-Hack-Day-Melbourne-2019-12-320.jpg)
Angular Routing - Angular Hack Day Melbourne 2019
- 1. Enterprise Software Development Join the Conversation #AngularHackDay @jernej_kavka
- 2. Melbourne - Angular Hack Day 2019 An introduction to Routing in Angular Join the Conversation #AngularHackDay @jernej_kavka
- 3. Senior Software Architect at SSW Jernej Kavka (JK) @Jernej_kavka https://github.com/jernejk https://jkdev.me https://opencollective.com/jernej-kavka Focusing on .NET Core, Cognitive Services and ML.NET Join the Conversation #AngularHackDay @jernej_kavka
- 4. Get started Navigate with arguments Navigate to a new page Table of Contents
- 5. Get started • Create Angular application with routing • Use ng new • Angular CLI will ask you if you want routing Join the Conversation #AngularHackDay @jernej_kavka
- 6. Add app-routing.module.ts in src folder Manually enabling routing Join the Conversation #AngularHackDay @jernej_kavka
- 7. Manually enabling routing In app.module.ts, update as follows Join the Conversation #AngularHackDay @jernej_kavka
- 8. Manually enabling routing Lastly, in app.module.html, update as follows Join the Conversation #AngularHackDay @jernej_kavka
- 9. Navigate to a new page • Create new component ng generate component Democracy • Add a route in app-routing.module.ts { path: 'democracy', component: DemocracyComponent } • Add a link in the menu in app.component.html <a [routerLink]="'democracy'">Who will sit on Iron Throne?</a> Join the Conversation #AngularHackDay @jernej_kavka
- 10. The Game of Thrones Join the Conversation #AngularHackDay @jernej_kavka ?
- 11. Navigate with arguments • Add routing to Iron Throne page • { path: 'iron-throne/:id', component: IronThroneComponent } • Add a link to Irone Throne page • <a [routerLink]="['/iron-throne', character.id]"> • Get the character ID • In constructor: private route: ActivatedRoute • const id = this.route.snapshot.paramMap.get('id'); • Display the character as the rightful ruler Join the Conversation #AngularHackDay @jernej_kavka
- 12. Other ways to navigate • In HTML: • <a [routerLink]="['/iron-throne', character.id]"> • In Code: • In constructor: private router: Router • this.router.navigate(['/iron-throne’, character.id]); Join the Conversation #AngularHackDay @jernej_kavka
- 13. Learn more about Routing: angular.io/guide/router
- 14. Thank you! [email protected] www.ssw.com.au Sydney | Melbourne | Brisbane