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.

Summary

This lesson demonstrates how to use Angular components by including them in parent component templates. You'll learn to display previously created components (recipes and shopping lists) in the app component, use Bootstrap grid classes (row, col-md-5, col-md-7) to create responsive two-column layouts, and implement component nesting where parent components include child components. By the end, you'll understand how to structure a component hierarchy that separates concerns and improves code organization.

Key points

Components are included in templates using their selector tags (e.g., `<app-recipe-item></app-recipe-item>`) to display them in the parent component
Bootstrap grid classes create responsive layouts: `row` containers with `col-md-5` and `col-md-7` classes position components side-by-side on larger screens and stack vertically on mobile
Component nesting creates a hierarchical structure where parent components (recipe-list, shopping-list-edit) manage structure while child components handle specific display tasks
Using `<hr>` tags and Bootstrap grid structure allows logical separation and organization of related components within larger container components
Responsive design automatically adapts component layout based on viewport width without requiring additional code changes
Planning component hierarchy before implementation leads to cleaner, more maintainable, and more reusable Angular code

FAQ

How do you include a child component inside a parent component's template?

Use the component's selector tag directly in the parent's HTML. For example, if a recipe-item component selector is `app-recipe-item`, include it in the recipe-list template as `<app-recipe-item></app-recipe-item>`. The parent component file must also import the child component in its component decorator.

What Bootstrap grid classes are used to create a responsive two-column layout?

Use `<div class="row">` to create a container, then add columns with classes like `col-md-5` (smaller column) and `col-md-7` (larger column). The 'md' prefix means these widths apply at medium viewport size and larger; on smaller screens, columns automatically stack vertically.

Why is component nesting important in Angular applications?

Component nesting creates a logical hierarchy that separates concerns: parent components manage overall structure and layout logic, while child components focus on displaying individual items or specific functionality. This makes code more modular, easier to maintain, and promotes reusability across the application.