Directives overview

There are three kinds of directives in Angular:

1. Components—directives with a template.
2. Structural directives—change the DOM layout by adding and removing DOM elements.
3. Attribute directives—change the appearance or behavior of an element, component, or another directive.

Components are the most common of the three directives

• A component class that handles data and functionality. In the previous section, the product data and the share()method in the component class handle data and functionality respectively.

• An HTML template that determines the UI. In the previous section, the product list's HTML template displays the name, description, and a "Share" button for each product.

• Component-specific styles that define the look and feel. Though product list does not define any styles, this is where component CSS resides.

Structural Directives _change the structure of the view. Two examples are NgFor and NgIf

Attribute directives are used as attributes of elements. for example, can change several element styles at the same time.

.