Angular Directives

Angular Directives are the most important features of Angular. In this, tutorial We will look at three types of directives that Angular supports like Component, Structural, and Attribute Directives. We also look at the few of the most commonly used Angular directives. 

Download Source  Code

What is Angular Directive

The Angular directive helps us to manipulate the DOM. You can change the appearance, behavior, or layout of a DOM element using the Directives. They help you to extend HTML

There are three kinds of directives in Angular:

  1. Component Directive
  2. Structural directives
  3. Attribute directives

Component Directive

Components are special directives in Angular. They are the directive with a template (view) We covered how to create Components in Angular tutorial.

Structural Directives

Structural directives can change the DOM layout by adding and removing DOM elements. All structural Directives are preceded by Asterix symbol

Commonly used structural directives


The ngFor is an Angular structural directive, which repeats a portion of the HTML template once per each item from an iterable list (Collection). The ngFor is similar to ngRepeat in AngularJS

Example of ngFor

You can read more about the Angular ngFor Directive tutorial.


The ngSwitch directive lets you add/remove HTML elements depending on a match expression. ngSwitch directive used along with ngSwitchCase and ngSwitchDefault

The example of ngSwitch

You can read more about the Angular ngSwitch Directive tutorial.


The ngIf Directives is used to add or remove HTML elements based on an expression. The expression must return a boolean value. If the expression is false then the element is removed, else the element is inserted

Example of ngIf

You can read more about Angular ngIf Directive tutorial.

Attribute Directives

An Attribute or style directive can change the appearance or behavior of an element.

Commonly used Attribute directives


The ngModel directive is used the achieve the two-way data binding. We have covered ngModel directive in Data Binding in Angular Tutorial


The ngClass is used to add or remove the CSS classes from an HTML element. Using the ngClass one can create dynamic styles in HTML pages

Example of ngClass


ngStyle is used to change the multiple style properties of our HTML elements. We can also bind these properties to values that can be updated by the user or our components.

Example of ngStyle

Building Custom Directives

You can also build custom directives in Angular. The Process is to create a JavaScript class and apply the @Directive attribute to that class. You can write the desired behavior in the class.


In this tutorial, we introduced you to the directives in Angular. In the next few tutorials, we will look at some of the important directives in detail

Download Source  Code

2 thoughts on “Angular Directives”

  1. Hey ! Thanks for your amazing work on this tutorial, really appreciate it.

    I just noticed that you mention here the existence of 3 types of directives (Component directive, Structural directive and Attribute directive), but in your Introduction to this tutorial, you only mentioned 2 types of directives (Structural directives and Attribute directives).

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top