Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Angular Routing - Angular Hack Day Melbourne 2019


Published on

Presentation for Angular Hack Day 2019 in Melbourne for Angular routing, presented by Jernej Kavka (JK).
GitHub URL:

  • Be the first to comment

Angular Routing - Angular Hack Day Melbourne 2019

  1. 1. Enterprise Software Development Join the Conversation #AngularHackDay @jernej_kavka
  2. 2. Melbourne - Angular Hack Day 2019 An introduction to Routing in Angular Join the Conversation #AngularHackDay @jernej_kavka
  3. 3. Senior Software Architect at SSW Jernej Kavka (JK) @Jernej_kavka Focusing on .NET Core, Cognitive Services and ML.NET Join the Conversation #AngularHackDay @jernej_kavka
  4. 4. Get started Navigate with arguments Navigate to a new page Table of Contents
  5. 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. 6. Add app-routing.module.ts in src folder Manually enabling routing Join the Conversation #AngularHackDay @jernej_kavka
  7. 7. Manually enabling routing In app.module.ts, update as follows Join the Conversation #AngularHackDay @jernej_kavka
  8. 8. Manually enabling routing Lastly, in app.module.html, update as follows Join the Conversation #AngularHackDay @jernej_kavka
  9. 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. 10. The Game of Thrones Join the Conversation #AngularHackDay @jernej_kavka ?
  11. 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',]"> • 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. 12. Other ways to navigate • In HTML: • <a [routerLink]="['/iron-throne',]"> • In Code: • In constructor: private router: Router • this.router.navigate(['/iron-throne’,]); Join the Conversation #AngularHackDay @jernej_kavka
  13. 13. Learn more about Routing:
  14. 14. Thank you! Sydney | Melbourne | Brisbane