Angular optional route

Author: elanderson

ASP.NET Core Basics/src/Angular/ClientApp/app/app.module.ts

@@ -28,6 +28,7 @@ import { CounterComponent } from './components/counter/counter.component';
             { path: 'counter', component: CounterComponent },
             { path: 'fetch-data', component: FetchDataComponent },
             { path: 'contact-list', component: ContactListComponent },
+            { path: 'contact-detail', component: ContactDetailComponent },
             { path: 'contact-detail/:id', component: ContactDetailComponent },
             { path: '**', redirectTo: 'home' }
         ])

ASP.NET Core Basics/src/Angular/ClientApp/app/components/contacts/contactdetail.component.html

@@ -14,5 +14,8 @@
         <dd>{{contact.email}}</dd>
     </dl>
 </div>
+<h3 *ngIf="!hasContactId">
+    Place holder for creating a new contact
+</h3>
 <a routerLink="/contact-list">Back to List</a>
 <hr />

ASP.NET Core Basics/src/Angular/ClientApp/app/components/contacts/contactdetail.component.ts

@@ -11,14 +11,22 @@ import { ContactService } from './contact.service';
 })
 export class ContactDetailComponent implements OnInit {
     contact: Contact;
+    hasContactId: boolean;
 
     constructor(private route: ActivatedRoute,
                 private router: Router,
                 private contactService: ContactService) { }
 
     ngOnInit(): void {
+        var contactId: string;
+
         this.route.params
-            .switchMap((params: Params) => this.contactService.getById(params['id']))
-            .subscribe((contact :Contact) => this.contact = contact);
+            .subscribe((params: Params) => contactId = params['id']);
+        this.hasContactId = contactId != undefined;
+
+        if (this.hasContactId) {
+            this.contactService.getById(contactId)
+                .then((contact: Contact) => this.contact = contact);
+        }
     }
 }

ASP.NET Core Basics/src/Angular/ClientApp/app/components/contacts/contactlist.component.html

@@ -2,6 +2,8 @@
 
 <p *ngIf="!contacts"><em>Loading...</em></p>
 
+<a [routerLink]="['/contact-detail']">Create New Contact</a>
+
 <table class="table" *ngIf="contacts">
     <thead>
         <tr>