Angular: Up and Running

Chapter 3. Useful Built-In Angular Directives

In the previous chapter, we got started with our very first Angular application, and got a feel for using the Angular CLI to begin a new project and create components in it. We got a basic sense of how to use Angular’s data and event binding mechanisms as well.

In this chapter, we will first understand what directives are in Angular and how they are different from components. We will then cover some basic directives that Angular provides out of the box and the use cases where they’re applicable. By the end of the chapter, you should be comfortable using most of the out-of-the-box directives that Angular provides and understand when and where to use them.

Directives and Components

A directive in Angular allows you to attach some custom functionality to elements in your HTML. A component in Angular, like the one we built in the previous chapter, is a direcive that provides both functionality and UI logic. It is fundamentally an element that encapsulates its behavior and rendering logic.

Noncomponent directives, on the other hand, usually work on and modify existing elements. These can be further classified into two types:

Attribute directives

Attribute directives change the look and feel, or the behavior, of an existing element or component that it is applied on. NgClass and NgStyle, which we will see later in this chapter, are examples of attribute directives.

Structural directives

Structural directives change the DOM layout by ...