This tutorial introduces routing in Angular. Routing is the ability to navigate from one component in the application to another. In Single Page Applications (SPA), only parts of the page are updated to represent the requested view for the user.
The Angular Router enables users to declare routes and specify which component should be displayed on the screen if that route is requested by the application.
In this lesson, you will enable routing in your application to navigate to the details page.
In the previous step you removed the reference to the component in the template. In this step, you will add a new route to that component.
In routes.ts, perform the following updates to create a route.
Add a file level imports for the HomeComponent, DetailsComponent and the Routes type that you'll use in the route definitions.
import {Routes} from '@angular/router';
import {HomeComponent} from './home/home.component';
import {DetailsComponent} from './details/details.component';
Define a variable called routeConfig of type Routes and define two routes for the app:
The entries in the routeConfig array represent the routes in the application. The first entry navigates to the HomeComponent whenever the url matches ''. The second entry uses some special formatting that will be revisited in a future lesson.
Save all changes and confirm that the application works in the browser. The application should still display the list of housing locations.
Conceptual preview of routing
This tutorial introduces routing in Angular. Routing is the ability to navigate from one component in the application to another. In Single Page Applications (SPA), only parts of the page are updated to represent the requested view for the user.
The Angular Router enables users to declare routes and specify which component should be displayed on the screen if that route is requested by the application.
In this lesson, you will enable routing in your application to navigate to the details page.
1. Create a default details component
From the terminal, enter the following command to create the DetailsComponent:
This component will represent the details page that provides more information on a given housing location.
2. Add routing to the application
In main.ts, make the following updates to enable routing in the application:
In src/app/app.component.ts, update the component to use routing:
3. Add route to new component
In the previous step you removed the reference to the component in the template. In this step, you will add a new route to that component.
In routes.ts, perform the following updates to create a route.
Define a variable called routeConfig of type Routes and define two routes for the app:
The entries in the routeConfig array represent the routes in the application. The first entry navigates to the HomeComponent whenever the url matches ''. The second entry uses some special formatting that will be revisited in a future lesson.
Save all changes and confirm that the application works in the browser. The application should still display the list of housing locations.