Angular - 3.6 use of the components

With every component generated, we now drop them into app.component.html to build the actual layout. Inside the existing Bootstrap container we replace the placeholder heading with <app-recipes></app-recipes> and just below add <app-shopping-list></app-shopping-list>. The default paragraphs from the generated components show up immediately, confirming they are properly registered and rendered.

Structuring the recipes screen

Inside recipes.component.html we want a master/detail layout: the list on the left, the details on the right. We use a Bootstrap row with two columns:

<div class="row">
  <div class="col-md-5">
    <app-recipe-list></app-recipe-list>
  </div>
  <div class="col-md-7">
    <app-recipe-detail></app-recipe-detail>
  </div>
</div>

In a wide viewport the two columns sit side by side; on a smaller screen Bootstrap stacks them automatically. To make it look like a real list, we nest the single item component inside the list component: recipe-list.component.html now contains <app-recipe-item></app-recipe-item>. We will iterate over real data later, but the structure already mirrors what the final UI will be.

The shopping list screen follows the same logic but is simpler: a single column (col-xs-12) hosting first the <app-shopping-edit> area to add or modify items, then a horizontal rule, and finally the list itself rendered by the surrounding shopping list component. With this layout in place the application is starting to take shape, even though every component still shows its default paragraph. In the next lesson we will polish the navigation bar and turn the header into something usable.