Angular April

<< Day 2 >>

Components and Routing

Goals

• Create components for our primary navigation (pages)
• Set up routing for those pages
• Display page components only for the corresponding route

Notes:

Creating components:

• mkdir src/app/components
• cd src/app/copmonents
• (make sure you are in the components directory before running this command) ng g component my-component

Setting up routing in the app.module.ts file:

• import the router by adding: import { RouterModule } from '@angular/router';
• at the end of the "imports" list add: RouterModule.forRoot([])
• for each route, add a path (inside the forRoot array...): { path: 'my-component', component: MyComponent }

Setting up routing on your pages: (app.component.html)

• place "<router-outlet></router-outlet>" where you want your components displayed on the page (typically the bottom under any navigation...)
• add navigation links by replacing "href" with "routerLink": <a routerLink="/about-me">About Me</a>

Resources

• More about Routing with Angular
• Angular Architecture - how components work in Angular

More Help

Suggested routing for all 4 projects:

Share your project, ask questions, or help someone else on the Angular April - Facebook group page.

If you have a comment or suggestion for "Angular April" then send and email to: KarenFreemanSmith@gmail.com with the subject line: "Angular April".