Angular Directives in a Nutshell

Angular directives are a fundamental feature of Angular that enable developers to create dynamic, reusable, and interactive components. They enhance the capabilities of HTML and facilitate the clean and efficient implementation of complex behaviors by interacting with the DOM.

This article will explain what Angular directives are and outline their different types.

If you are looking for a video explanation, feel free to watch the video I posted on my channel InterviewPro.

What Are Angular Directives?

In Angular, directives are special markers placed on elements, such as attributes, classes, or comments. They instruct Angular to apply a specific behavior to the DOM element or to transform it in a certain way. Directives are used to modify the appearance, behavior, or layout of DOM elements.

Angular provides three types of directives:

1. Component Directives
2. Attribute Directives
3. Structural Directives

Component Directives

A component directive in Angular is a type of directive that comes with a template. It defines a reusable piece of your application, like a button, form, or an entire page. Essentially, it’s what you commonly think of as a component in Angular.

It controls a part of the user interface (UI) by using the @Component decorator and includes HTML, CSS, and JavaScript/TypeScript logic.

@Component({
  selector: 'app-root',
  template: '<h1>Hello, World!</h1>',
  styles: ['h1 { color: blue; font-family: Arial, sans-serif; }']
})
export class AppComponent {}

Another example using templateUrl and styleUrls:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {}

Template file (app.component.html):

<h2>Welcome to Angular Components!</h2>

Styles file (app.component.css):

h2 {
  color: blue;
  text-align: center;
}

Attribute Directives

An attribute directive in Angular is a type of directive that modifies the appearance or behavior of a DOM element or component by changing its attributes or styles. It acts like a decorator for elements, allowing you to dynamically update their properties or apply effects based on logic in your code.

Get InterviewPro’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Here is a list of some common built-in attribute directives in Angular, which can modify the behavior or appearance of DOM elements:

Built-in Attribute Directives

1. NgClass: Dynamically adds or removes CSS classes on an element.
2. NgStyle: Dynamically applies inline styles to an element.
3. NgModel: Two-way data binding for form inputs.

We have previously discussed NgClass and NgStyle built-in attributes in our earlier article. Feel free to revisit them for more details.

NgModel

ngModel is a directive in Angular that facilitates two-way data binding. It allows you to bind an HTML element (like an input field) to a variable in your component, automatically updating the variable when the user changes the input and vice versa.

<input [(ngModel)]="username">

In this example, changes to the input field username automatically update the name property in the component.

Structural Directives

Structural directives in Angular are used to modify the structure of the DOM (Document Object Model) by adding, removing, or manipulating elements. They change how the view appears based on certain conditions.

The most common structural directives are:

*ngIf: Adds or removes an element from the DOM depending on whether a condition is true or false.

<button *ngIf="isVisible">Display button if isVisible is true</button>

*ngFor: Loops through a collection (like an array) and creates an element for each item.

<ul>
  <li *ngFor="let playlist of playlists">{{ playlist }}</li>
</ul>

*ngSwitch: Conditionally displays one of many elements based on a given expression.

<div [ngSwitch]="selectedPlaylist">
  <div *ngSwitchCase="'react'">React JS</div>
  <div *ngSwitchCase="'angular'">Angular</div>
  <div *ngSwitchDefault>All playlists</div>
</div>

In simple terms, structural directives help you control what parts of your UI are displayed or hidden based on conditions, loops, or switches.

Conclusion

Angular directives are essential for creating dynamic and interactive applications. By comprehending the various types of directives and learning how to build custom ones, you can greatly improve the functionality and maintainability of your Angular projects.

I hope this article has helped you gain a better understanding of different types of directives in Angular. Happy coding!

Follow InterviewPro for more updates. Show your support on my YouTube channel too 😁.