Create a side-by-side navigation between a list and its detail with the Angular Router

Mostly all advanced routing mechanisms allow not only for top-level routes, but also to define child routes. Consider an application menu having a “People” entry and within that component we have a list of names which in turn when clicking on them open a side-view directly displaying the details of that specific person. We just pictured a multi-level route. In this lesson we will define and configure such a child route and learn how they work with the Angular router.