Science Knowings: JavaScript Course For Social Media

Angular Directives

Introduction to Angular Directives

Welcome back! In this session, we'll dive into Angular directives, a powerful mechanism for extending and customizing HTML and enhancing the capabilities of our Angular applications.

What are Angular Directives?

Angular directives are markers on HTML elements that allow us to attach specific behaviors and functionality to those elements.

Types of Directives

There are three main types of directives in Angular:

  • Attribute Directives: Modify the appearance or behavior of elements based on attributes (e.g., [ngStyle]).
  • Structural Directives: Add, remove, or manipulate DOM elements based on conditions (e.g., *ngIf, *ngFor).
  • Component Directives: Create reusable components that encapsulate behavior and state (e.g., @Component).

Attribute Directives

Attribute directives enhance the behavior of HTML elements by modifying their attributes. They are prefixed with square brackets (e.g., [ngStyle], [ngClass]).

Structural Directives

Structural directives alter the DOM structure by adding, removing, or manipulating elements. They are prefixed with an asterisk (e.g., *ngIf, *ngFor).

Component Directives

Component directives define custom components that encapsulate behavior and state. They are annotated with @Component and use template syntax to define the component's HTML, CSS, and behavior.

Creating Attribute Directives

To create an attribute directive:

  1. Use @Directive({ selector: '[selector-name]' }) to declare the directive.
  2. Define the logic in the directive's class.
  3. Use the HostBinding() or HostListener() decorators to modify the host element.

Creating Structural Directives

To create a structural directive:

  1. Use @Directive({ selector: 'selector-name' }) to declare the directive.
  2. Define the logic in the directive's class.
  3. Use the TemplateRef and ViewContainerRef to manipulate the DOM.

Creating Component Directives

To create a component directive:

  1. Use @Component({ selector: 'selector-name', template: '...' }) to declare the component.
  2. Define the component's logic in its class.
  3. Use @Input() and @Output() to bind data to and from the component.

Directive Selectors

Directives use selectors to specify which elements they apply to. Selectors can be based on element names, attributes, or classes (e.g., [ngStyle], *ngIf.odd).

Directive Priorities

When multiple directives apply to the same element, Angular uses priorities to determine the order of execution. Higher priorities execute first (e.g., *ngIf has a higher priority than *ngFor).


Transclusion allows directives to insert content into the host element. It can be used with structural directives (e.g., ).

Template Syntax

Angular directives use template syntax to define behavior and manipulate the DOM. This syntax includes interpolation ({{}}), property binding ([()]), and event binding (()).

Custom Components

Component directives allow us to create reusable UI elements that encapsulate behavior and state. These custom components can be used throughout the application.

Best Practices for Directives

Follow these best practices for creating effective Angular directives:

  • Choose the appropriate directive type (attribute, structural, or component).
  • Use clear and descriptive names.
  • Test directives thoroughly.
  • Document directives with clear usage instructions.

Next topic: Angular Services

In the next session, we'll explore Angular services, which are reusable, injectable classes that provide specific functionality. Follow us to learn more!