Angular - 2.21-understand the instructions

We are almost done with the basics of Angular. We have already gathered a lot of knowledge about components, the building blocks of any Angular application: how they bootstrap, how their templates communicate with the TypeScript class to read data and react to events. The next key concept we need to add to the toolbox is the directive. Directives are instructions in the DOM, and we have already been using them - probably without realising it.

In fact, components are themselves directives, but directives that come with a template. As soon as we place a component selector somewhere in a template, we instruct Angular: "Replace this tag with the content and behaviour of the component". That is exactly the kind of instruction a directive expresses. The difference is that some directives do not have a template at all - they only enhance an existing element.

Directives with and without templates

  • Components: directives bundled with a template (HTML + CSS + logic).
  • Attribute directives: modify the look or behaviour of an existing element (e.g. appTurnGreen).
  • Structural directives: add or remove elements from the DOM (e.g. *ngIf, *ngFor).

A typical custom directive without template would be appTurnGreen, used as <p appTurnGreen>Hello</p> to colour the text in green. The selector is usually written between brackets as an attribute selector, but technically you can configure it like a component selector and use CSS classes or element form too. Attribute selectors remain the standard for directives.

To declare a directive we use the @Directive({ selector: '[appTurnGreen]' }) decorator on a TypeScript class and write the logic inside. We will see in detail how to author our own custom directives later in the course. For now, what matters is to remember: a directive is just an instruction sent to the DOM. Angular ships with several built-in directives (*ngIf, *ngFor, ngStyle, ngClass, ngModel) that we are going to discover in the upcoming lessons.

Summary

This lesson introduces a practical project combining a recipe book and shopping list application to practice Angular concepts learned in previous sections. The lesson emphasizes the importance of planning the application structure—defining components, managing recipes with detailed views, and enabling users to add ingredients from recipes directly to their shopping list. Before development begins, the lesson outlines a planning phase to identify all necessary components and establish a solid foundation for building this comprehensive application.

Key points

  • Build a recipe book and shopping list application combining recipe management with grocery shopping functionality
  • The app features two main sections: a recipe book with detailed views and a shopping list with ingredient management
  • Key features include viewing recipe details and importing ingredients from recipes directly to the shopping list
  • Planning and defining the application structure before coding is essential for identifying all necessary components
  • The project applies many Angular features and concepts learned in the previous course section
  • The planning phase precedes component identification and development, ensuring a well-organized architecture

FAQ

What is the main project introduced in this lesson?

A recipe book and shopping list application that combines recipe management with shopping list functionality, allowing users to view recipes in detail and add ingredients directly to their shopping list.

Why is planning the application structure important before coding?

Planning helps define the structure and identify the necessary components before development begins, ensuring a solid and well-organized foundation for the entire application.

What are the two main sections of the application?

The recipe book section for managing and viewing recipes in detail, and the shopping list section for managing grocery items and imported ingredients.