Updating the WorkoutBuilder component

We next need to update the WorkoutBuilder component to support our new child routes. To do so, change the @Component decorator for Workout Builder to:

1. Remove the selector
2. Add a <abe-sub-nav-main> custom element to the template
3. Add a <router-outlet> tag to the template

The decorator should now look like the following:

@Component({
  template: `<div class="container-fluid fixed-top mt-5">
                <div class="row mt-5">
                  <abe-sub-nav-main></abe-sub-nav-main>
                </div>
                <div class="row mt-2">
                  <div class="col-sm-12">
                    <router-outlet></router-outlet>
                  </div>
                </div>
            <div>`
})

We are removing the selector because WorkoutBuilderComponent will not be embedded in the application root, app.component.ts. Instead, it will be reached from app.routing-module.ts through routing. And while it will handle incoming routing requests from app.routes.ts, it will, in turn, be routing them to the other components contained in the Workout Builder feature.

And those components will display their views using the <router-outlet> tag that we have just added to the WorkoutBuilder template. Given that the template for Workout BuilderComponent will be simple, we are using an inline template instead of a templateUrl.

We are also adding an <abe-sub-nav-main> element that will be used to create a secondary top-level menu for navigating within the Workout Builder feature. We'll discuss that a little later in this chapter.