Angular 2 Optional Route Parameter

This post expands on the Angular 2 post from a couple of weeks ago involving route links and parameters to include an “optional” route parameter. Using the use case from the same topic with Aurelia from last week’s post which is if a user ends up on the contact detail page with no contact ID they will be presented with the option to add a new contact. The starting point for the code can be found here. Keep in mind any changes in this post are taking place in the Angular project.

Route with an “optional” parameter

The reason for the quotes around optional is that with Angular’s current router I have found no way to make a route optional. As a work around two routes can be added that point to the same component. The following code is in the app.module.ts file of the ClientApp/app folder. The first handles calling the contact detail component without an ID and the second makes the call with an ID.

 { path: 'contact-detail', component: ContactDetailComponent },
 { path: 'contact-detail/:id', component: ContactDetailComponent },

Contact detail changes

The contact detail view model found in the contactdetail.component.ts file a class level property is needed to track of the contact detail component was called with an ID or not.

hasContactId: boolean;

Next, in the ngOnInit function has been changed to set the new property based on the route params having an ID set or not. If a contact ID is found then the details for that contact are loaded. The following is the full function.

ngOnInit(): void {
    var contactId: string;
 
    this.route.params
        .subscribe((params: Params) => contactId = params['id']);
 
   this.hasContactId = contactId != undefined;

   if (this.hasContactId) {
       this.contactService.getById(contactId)
           .then((contact: Contact) => this.contact = contact);
   }
}

In the associated view a placeholder for creating a new contact was added in the contactdetail.component.html file. This placeholder was added just above the link back to the contact list. This placeholder will only show if the detail components are loaded with no ID.

<h3 *ngIf="!hasContactId">
    Place holder for creating a new contact
</h3>

Add create link to the contact list

To finish a “Create New Contact” link is added to the contact list view found in the contactlist.component.html file which will call the contact detail component without a contact ID.

<a [routerLink]="['/contact-detail']">Create New Contact</a>

In the example solution, this link will show above the table of contacts.

Wrapping up

The finished code can be found here. If you have tried both Angular 2 and Aurelia leave a comment on how you think they compare and which you prefer.