Creating a Routing Configuration

The Routes class defines a collection of routes, each of which tells Angular how to handle a specific URL. This example uses the most basic properties, where the path specifies the URL and the component property specifies the component that will be displayed to the user.

The routes are packaged into a module using the RouterModule.forRoot method. The forRoot method produces a module that includes the routing service. There is also a forChild method that doesn’t include the service, and that is demonstrated in Chapter 26, where I explain how to create routes for feature modules.

Creating the Routing Component

The paMessages element displays any messages and errors in the application. For the purposes of routing, it is the router-outlet element—known as the outlet—that is important because it tells Angular that this is where the component matched by the routing configuration should be displayed.

Updating the Root Module

Completing the Configuration

The app element applies the new root component, whose template contains the router-outlet element. When you save the changes and the browser reloads the application, you will see just the product table, as illustrated by Figure 25-2. The default URL for the application corresponds to the route that shows the product table.

Adding Navigation Links

The basic routing configuration is in place, but there is no way to navigate around the application: nothing happens when you click the Create New Product or Edit button.

Understanding the Effect of Routing

When all the changes have been saved, you will be able to navigate around the application using the Edit, Create New Product, and Cancel buttons, as shown in Figure 25-3.

If you watch the output from the development HTTP server during the transition, you will notice that no requests are received by the server for new content. This change is done entirely within the Angular application and does not produce any new HTTP requests.

The routing system takes into account the base element in the index.html file when it matches the URL to a route. The base element is configured with an href value of / that is combined with the path in the route to make a match when the URL is /form/create.

The component property tells the Angular routing system that it should display the FormComponent to the user. A new instance of the FormComponent class is created, and its template content is used as the content for the router-outlet element in the root component’s template.

This route tells Angular to display the TableComponent to the user. A new instance of the TableComponent class is created, and its template is used as the content of the router-outlet element, displaying the model data to the user.

This is the essence of routing: the browser’s URL changes, which causes the routing system to consult its configuration to determine which component should be displayed to the user. There are lots of options and features available, but this is the core purpose of routing, and you won’t go too far wrong if you keep this in mind.

Handling Route Changes in Components

The form component isn’t working properly because it isn’t being notified that the user has clicked a button to edit a product. This problem occurs because the routing system creates new instances of component classes only when it needs them, which means the FormComponent object is created only after the Edit button is clicked. If you click the Cancel button under the form and then click an Edit button in this table again, a second instance of the FormComponent will be created.

This leads to a timing issue in the way that the product component and the table component communicate, via a Reactive Extensions Subject. A Subject only passes on events to subscribers that arrive after the subscribe method has been called. The introduction of routing means that the FormComponent object is created after the event describing the edit operation has already been sent.

This problem could be solved by replacing the Subject with a BehaviorSubject, which sends the most recent event to subscribers when they call the subscribe method. But a more elegant approach—especially since this is a chapter on the routing system—is to use the URL to collaborate between components.

Angular provides a service that components can receive to get details of the current route. The relationship between the service and the types that it provides access to may seem complicated at first, but it will make sense as you see how the examples unfold and some of the different ways that routing can be used.

The component no longer uses Reactive Extensions to receive events. Instead, it inspects the second segment of the active route’s URL to set the value of the editing property, which determines whether it should display its create or edit mode. If you click an Edit button in the table, you will now see the correct coloring displayed, as shown in Figure 25-4.

Using Route Parameters

When Angular is trying to match a route to a URL, it looks at each segment in turn and checks to see that it matches the URL that is being navigated to. Both of these URLs are made up of static segments, which means they have to match the navigated URL exactly before Angular will activate the route.

The component doesn’t need to know the structure of the URL to get the information it needs. Instead, it can use the params property provided by the ActivatedRouteSnapshot class to get a collection of the parameter values, indexed by name. The component gets the value of the mode parameter and uses it to set the editing property.

Using Multiple Route Parameters

To tell the form component which product has been selected when the user clicks an Edit button, I need to use a second route parameter. Since Angular matches URLs based on the number of segments they contain, this means I need to split up the routes that target the form component again, as shown in Listing 25-14. This cycle of consolidating and then expanding routes is typical of most development projects as you increase the amount of information that is included in routed URLs to add functionality to the application.

import { Routes, RouterModule } from "@angular/router";

import { TableComponent } from "./core/table.component";

import { FormComponent } from "./core/form.component";

const routes: Routes = [

    { path: "form/:mode/:id", component: FormComponent },

    { path: "form/:mode", component: FormComponent },

    { path: "", component: TableComponent }]

export const routing = RouterModule.forRoot(routes);

Listing 25-14

Adding a Route in the app.routing.ts File in the src/app Folder

The new route will match any URL that has three segments where the first segment is form. To create URLs that target this route, I need to use a different approach for the routerLink expressions in the template because I need to generate the third segment dynamically for each Edit button in the product table, as shown in Listing 25-15.

<table class="table table-sm table-bordered table-striped">

    <tr>

        <th>ID</th><th>Name</th><th>Category</th><th>Price</th><th></th>

    </tr>

    <tr *ngFor="let item of getProducts()">

        <td style="vertical-align:middle">{{item.id}}</td>

        <td style="vertical-align:middle">{{item.name}}</td>

        <td style="vertical-align:middle">{{item.category}}</td>

        <td style="vertical-align:middle">

            {{item.price | currency:"USD" }}

        </td>

        <td class="text-center">

            <button class="btn btn-danger btn-sm" (click)="deleteProduct(item.id)">

                Delete

            </button>

            <button class="btn btn-warning btn-sm" (click)="editProduct(item.id)"

                    [routerLink]="['/form', 'edit', item.id]">

                Edit

            </button>

        </td>

    </tr>

</table>

<button class="btn btn-primary" (click)="createProduct()" routerLink="/form/create">

    Create New Product

</button>

<button class="btn btn-danger" (click)="deleteProduct(-1)">

    Generate HTTP Error

</button>

Listing 25-15

Generating Dynamic URLs in the table.component.html File in the src/app/core Folder

The routerLink attribute is now enclosed in square brackets, telling Angular that it should treat the attribute value as a data binding expression. The expression is set out as an array, with each element containing the value for one segment. The first two segments are literal strings and will be included in the target URL without modification. The third segment will be evaluated to include the id property value for the current Product object being processed by the ngIf directive, just like the other expressions in the template. The routerLink directive will combine the individual segments to create a URL such as /form/edit/2.

Listing 25-16 shows how the form component gets the value of the new route parameter and uses it to select the product that is to be edited.

import { Component, Inject } from "@angular/core";

import { NgForm } from "@angular/forms";

import { Product } from "../model/product.model";

import { Model } from "../model/repository.model";

import { ActivatedRoute } from "@angular/router";

@Component({

    selector: "paForm",

    templateUrl: "form.component.html",

    styleUrls: ["form.component.css"]

})

export class FormComponent {

    product: Product = new Product();

    constructor(private model: Model, activeRoute: ActivatedRoute) {

        this.editing = activeRoute.snapshot.params["mode"] == "edit";

        let id = activeRoute.snapshot.params["id"];

        if (id != null) {

            Object.assign(this.product, model.getProduct(id) || new Product());

        }

    }

    editing: boolean = false;

    submitForm(form: NgForm) {

        if (form.valid) {

            this.model.saveProduct(this.product);

            this.product = new Product();

            form.reset();

        }

    }

    resetForm() {

        this.product = new Product();

    }

}

Listing 25-16

Using the New Route Parameter in the form.component.ts File in the src/app/core Folder

When the user clicks an Edit button, the routing URL that is activated tells the form component that an edit operation is required and which product is to be modified, allowing the form to be populated correctly, as shown in Figure 25-5.

Tip

Notice that I check to confirm that I have been able to retrieve a Product object from the data model in Listing 25-16 and create a new object if that isn’t the case. This is important because the data in the model is obtained asynchronously and may not have arrived by the time that the form component is displayed if the user requests the URL directly. This can also be a problem in development, where a change to the code in the application triggers a recompilation followed by a reload of whatever URL you navigated to before making the change. The result is an error as Angular tries to navigate directly to a route that you expected would not be required until after the data model had been populated. In Chapter 27, I explain how you can stop routes from being activated until a specific condition is true, such as the arrival of the data.

Navigating in Code

Using the routerLink attribute makes it easy to set up navigation in templates, but applications will often need to initiate navigation on behalf of the user within a component or directive.

The component receives the Router object as a constructor argument and uses it in the submitForm method to navigate back to the application’s root URL. The two statements that have been commented out in the submitForm method are no longer required because the routing system will destroy the form component once it is no longer on display, which means that resetting the form’s state is not required.

The result is that clicking the Save or Create button in the form will cause the application to display the product table, as shown in Figure 25-6.

Receiving Navigation Events

In many applications, there will be components or directives that are not directly involved in the application’s navigation but that still need to know when navigation occurs. The example application contains an example in the message component, which displays notifications and errors to the user. This component always displays the most recent message, even when that information is stale and unlikely to be helpful to the user. To see the problem, click the Generate HTTP Error button and then click the Create New Product button or one of the Edit buttons; the error message remains on display even though you have navigated elsewhere in the application.

All the event classes define an id property, which returns a number that is incremented each for each navigation, and a url property, which returns the target URL. The RoutesRecognized and NavigationEnd events also define a urlAfterRedirects property, which returns the URL that has been navigated to.

The result of these changes is that messages are shown to the user only until the next navigation event, as shown in Figure 25-7.

Removing the Event Bindings and Supporting Code

The result is that the coordination between the table and form components is handled entirely through the routing system, which is now responsible for displaying the components and managing the navigation between them.