Estimated reading: 3 minutes 30 views

🧠 AngularJS Directives & Pipes – Extend and Transform Your UI

🧲 Introduction – Declarative Power with Directives and Pipes

AngularJS enhances plain HTML into a powerful, declarative templating language. Directives manipulate the DOM, manage behavior, and control structure, while pipes (known as filters in AngularJS) let you format and transform displayed data seamlessly. These tools empower you to create dynamic, maintainable UIs with minimal boilerplate.

🎯 What You’ll Learn:

The difference between attribute and structural directives
How to use and create custom directives for reusable behavior
Overview of built-in filters (pipes) and how to build your own
Techniques to apply transformations directly in templates

📘 Topics Covered

🧩 Topic	📌 Description
Built-in Directives (Attribute & Structural)	ng-if, ng-repeat, ng-class, ng-style, etc.
Custom Directives	How to define your own reusable directives for DOM manipulation
Built-in & Custom Pipes (Filters)	currency, date, filter; plus how to make your own custom filters

🛠️ AngularJS Built-in Directives

Attribute Directives

ng-class, ng-style, ng-model: Bind behavior or styles
Apply directly on existing elements

<div ng-class="{ active: isActive }" ng-style="{ color: textColor }"></div>

Structural Directives

ng-if, ng-show, ng-hide, ng-repeat: Control rendering and repetition

<div ng-if="hasAccess">Welcome, user!</div>
<ul>
  <li ng-repeat="item in items">{{item.name}}</li>
</ul>

These directives alter the DOM structure dynamically based on application state.

🧪 AngularJS Custom Directives

Create custom directives to encapsulate reusable DOM behavior.

angular.module('app')
.directive('myHighlight', function() {
  return {
    restrict: 'A',
    link(scope, el, attrs) {
      el.css('background-color', attrs.myHighlight || 'yellow');
    }
  };
});

<p my-highlight="lightblue">Highlighted!</p>

Pros:

Encapsulate DOM logic
Clean separation, reusability
Support for attributes, elements, comments via restrict

🧹 AngularJS Pipes (Filters)

Filters transform displayed data in template:

<p>{{ price | currency }}</p>
<p>{{ birthday | date:'mediumDate' }}</p>
<p>{{ list | filter:searchText }}</p>

Create custom filters:

angular.module('app')
.filter('reverse', function() {
  return function(input) {
    return input ? input.split('').reverse().join('') : input;
  };
});

<p>{{ name | reverse }}</p>

📌 Summary – Recap & Next Steps

Directives and filters are central to AngularJS’ templating power. They let you:

Manipulate DOM and UI structure declaratively
Reuse complex behaviors cleanly
Format and transform data on the fly

Harnessing them unlocks scalable, maintainable UIs.

❓ Frequently Asked Questions (FAQs)

❓ What’s the difference between attribute and structural directives?

✅ Attribute directives (e.g. ng-class) modify existing elements; structural directives (e.g. ng-if, ng-repeat) add or remove elements from the DOM.

❓ How do I write a custom directive?

✅ Use angular.module(...).directive() with a configuration object containing restrict, scope, and a link or controller function.

❓ What are filters, and why are they useful?

✅ Filters (pipes) transform template output—like date formatting or filtering array items—and are reusable and composable.

❓ Can filters accept parameters?

✅ Yes: {{ value | customFilter:param1:param2 }} passes arguments into the filter function.

❓ Are filters performant in large lists?

✅ For large datasets, use custom services or apply transformations in controllers or services—not in templates repeatedly.

« Previous Next »

Share Now :