What are Angular Directives?

A Directive modifies the DOM to change appearance, behavior or layout of DOM elements. Directives are one of the core building blocks Angular uses to build Angular-Directives applications. In fact, Angular components are in large part directives with templates. From an Angular 1 perspective, Angular components have assumed a lot of the roles directives used to. The majority of issues that involve templates and dependency injection rules will be done through components, and issues that involve modifying generic behavior is done through directives. Directives are js class and declared as @directive.


There are three main types of directives in Angular:


  1. Component Directives
  2. Structural Directives
  3. Attribute Directives
  1. Component Directives: Component directives are used in main class. They contain the detail of how the component should be processed, instantiated and used at runtime.
  2. Structural Directives: Structural directives start with a * sign. These directives are used to manipulate and change the structure of the DOM elements. For example, *ngIf and *ngFor.
  3. Structural directives: directives that change the behavior of a component or element by affecting how the template is rendered.

How to create custom Directives?

You can create your own custom directives to use in Angular components.