🧩 AngularJS Built-in Directives (Attribute & Structural) – 2025 Guide

🧲 Introduction – Why Learn AngularJS Directives?

Directives are the core building blocks of AngularJS. They allow you to extend HTML behavior by attaching custom behavior, transformations, or logic to DOM elements. AngularJS comes with a powerful set of built-in directives that make the DOM reactive and dynamic.

There are two main types of built-in directives in AngularJS:

• Structural Directives 🧱 – Change the DOM structure (add/remove elements)
• Attribute Directives 🎨 – Change the behavior or appearance of existing elements

🎯 In this guide, you’ll learn:

• What AngularJS directives are and how they work
• Key differences between structural and attribute directives
• How to use common built-in directives with syntax and examples
• Best practices and real-world use cases

---

📘 What Are AngularJS Directives?

A directive in AngularJS is a special token in the markup that tells the framework to do something to a DOM element (or its children).

✅ Basic Example:

<p ng-show="isVisible">This is a visible paragraph.</p>

Here, ng-show is a built-in directive that shows/hides the element based on a condition.

---

🔄 Types of Built-in Directives

Type	Description
Structural 🧱	Add/remove elements from the DOM (ng-if, ng-repeat, ng-switch)
Attribute 🎨	Modify behavior/appearance (ng-class, ng-style, ng-model, ng-disabled)

---

🧱 Structural Directives – DOM Manipulators

🔹 ng-if

Displays an element only if the expression is true.

<p ng-if="isLoggedIn">Welcome back!</p>

$scope.isLoggedIn = true;

🧾 If isLoggedIn is false, the <p> element is not present in the DOM at all.

---

🔹 ng-show / ng-hide

Shows or hides an element (keeps it in the DOM).

<p ng-show="showContent">This is shown!</p>
<p ng-hide="hideContent">This is hidden!</p>

---

🔹 ng-repeat

Loops over arrays/objects and creates repeated DOM elements.

<ul>
  <li ng-repeat="user in users">{{ user.name }}</li>
</ul>

$scope.users = [{ name: "Alice" }, { name: "Bob" }];

🧾 Creates a list item for each object in the users array.

---

🔹 ng-switch

Conditionally displays one element out of many.

<div ng-switch="status">
  <p ng-switch-when="active">Active</p>
  <p ng-switch-when="inactive">Inactive</p>
  <p ng-switch-default>Unknown</p>
</div>

$scope.status = "active";

---

🎨 Attribute Directives – Behavior Modifiers

🔹 ng-class

Dynamically adds/removes CSS classes.

<div ng-class="{ 'active': isSelected }">Click Me</div>

$scope.isSelected = true;

---

🔹 ng-style

Applies inline CSS styles based on scope values.

<p ng-style="{ 'color': textColor }">Color me</p>

$scope.textColor = "green";

---

🔹 ng-model

Binds input values to the model with two-way binding.

<input ng-model="username">
<p>Hello, {{ username }}</p>

---

🔹 ng-disabled

Disables elements based on conditions.

<button ng-disabled="!formValid">Submit</button>

$scope.formValid = false;

---

🔹 ng-click, ng-submit, ng-change

These are event-based directives for interactivity.

<button ng-click="addToCart()">Add</button>
<form ng-submit="submitForm()">...</form>
<input ng-change="onChange()" ng-model="email">

---

🧠 Differences: Structural vs Attribute Directives

Feature	Structural Directives 🧱	Attribute Directives 🎨
DOM Manipulation	Yes – Add/Remove elements	No – Modify existing element only
Affects Layout	Yes	Rarely
Common Examples	ng-if, ng-repeat, ng-switch	ng-model, ng-class, ng-style
Element Presence	Removes from DOM	Keeps element in DOM

---

📌 Summary – Recap & Next Steps

AngularJS built-in directives help build interactive, responsive, and efficient applications. Structural directives manage the DOM, while attribute directives enhance behavior and style.

🔍 Key Takeaways:

• Use structural directives to show/hide or loop elements
• Use attribute directives for styling, binding, and interactivity
• ng-model, ng-repeat, and ng-if are most widely used

⚙️ Real-world Relevance:
Used in forms, tables, conditional UIs, lists, modals, menus, and nearly all AngularJS apps to make views dynamic and data-driven.

---

❓ FAQ – AngularJS Built-in Directives

---

❓ What is the difference between ng-if and ng-show?
✅ ng-if removes the element from the DOM, while ng-show only hides it using CSS.

---

❓ Can I use ng-repeat with objects?
✅ Yes, but by default it iterates over object properties—not just array elements.

---

❓ Is ng-model available for dropdowns and checkboxes?
✅ Absolutely. ng-model works with <select>, checkboxes, radios, inputs, and textareas.

---

❓ Are built-in directives better than custom directives?
✅ Built-in directives are optimized and tested. Use them wherever possible. Custom directives are great for reusable components.

---

Share Now :