Guide to Angular Directives

Directives are custom HTML attributes that tell angular to add additional behavior or to modify the style of the DOM elements. Angular has a bunch of built-in directives which offer functionality to extend the power of your application. It provides you an option to create your own directives.

An Angular component means a directive with a template. When we say that components are the building blocks of Angular applications, we are actually saying that directives are the building blocks of Angular applications.

It is basically a class with a @directive decorator. We have three types of directives in Angular.

These directives are listed below −

  1. Components directives

It is used to specify the HTML template. This directive contains the detail of how the component should be processed, instantiated, and used at run time. It is the most commonly used directive.

  • app.component.css: contains all the CSS styles for the component
  • app.component.html: contains all the HTML code used by the component to display itself
  • app.component.ts: contains all the code used by the component to control its behavior

It is decorated with the @component decorator.

2. Structural directives

Structural directives start with an asterisk (*) sign. The asterisk, syntax on a structural directive, such as *ngIf, is a shorthand that Angular interprets into a longer form.

These directives are used to manipulate and change the structure of the DOM elements. For example, *ngIf directive, *ngSwitch directive, and *ngFor directive.

NgIf — It allows us to Add/Remove DOM Element depending on a condition.

NgFor — It is used to customize data display. It is mainly used for displaying a list of items using repetitive loops.

NgSwitch — It is like the JavaScript switch. It can display one element from among several possible elements, based on a switch condition. Angular puts only the selected element into the DOM.

3. Attribute directives

It is used to modify the look or behavior of an element, component, or another directive. ngClass, ngStyle are the most used attribute type.

  • ngClass Directive: It is used to add or remove CSS classes to an HTML element.
  • ngStyle Directive: This directive facilitates you to modify the style of an HTML element using the expression. This directive is also used to dynamically change the style of your HTML element.




Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

dWeb Foundation to build a sub-level domain naming system on top of Flare

A Universal Bundle Loader

Guide to nodejs mongodb angularjs setup and deployment using ansible and vagrant

When and Where to use Const, Let and Var

Drupal and React/TypeScript components

Drupal and React/TypeScript

Websocket HelloWorld | Cameron Sim

Tryhackme — Walking An Application

What is high order components in React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Gursimar Singh

Gursimar Singh

More from Medium

Dependency Injection in Angular

Intro to Angular

JavaScript Runtime Environment and Event loop in JavaScript

Working with forms in Angular