Angular Directives
In Angular, directives are special instructions you can add to your HTML tags.
They tell Angular to do something specific with that HTML element.
Think of directives like giving extra superpowers to your HTML:
Think of directives like giving extra superpowers to your HTML:
- Show or hide elements
- Repeat lists
- Change styles dynamically
- Or build complete, reusable components
Angular has three main types of directives, each with its own purpose
Component Directives
These are the most common type.
These are the most common type.
- They represent reusable pieces of your UI, built with HTML templates and TypeScript code.
- For example, you might create a header component, a footer, or a custom card.
Structural Directives
These change the structure of your web page by adding or removing HTML elements based on conditions.
Common examples:
They are called structural because they change the structure of the DOM.
These change the structure of your web page by adding or removing HTML elements based on conditions.
Common examples:
- *ngIf - show/hide elements
- *ngFor - repeat elements in a list
- *ngSwitch - show different elements based on a condition
They are called structural because they change the structure of the DOM.
Attribute Directives
These modify the look or behavior of existing elements — without adding or removing them.
Examples:
They work just like regular HTML attributes, but smarter.
These modify the look or behavior of existing elements — without adding or removing them.
Examples:
- ngStyle - change CSS styles dynamically
- ngClass - add/remove CSS classes
- ngModel - create two-way data binding for forms
They work just like regular HTML attributes, but smarter.
Why Are Directives Important ?
Directives are at the heart of Angular because they let you:
Together, they help create:
Directives are at the heart of Angular because they let you:
- Build reusable UI parts (component directives)
- Make pages dynamic (structural directives)
- Add dynamic styling and behavior (attribute directives)
Together, they help create:
- Interactive apps
- Cleaner, maintainable code
- Faster development