What Are Directives?
Think of directives in Angular as the cool backstage crew that tells the HTML how to perform its best on stage. They’re like secret agents with superpowers that transform your static HTML into a dynamic, interactive experience.
Types of Directives
Angular brings three types of directives
- Component Directives
- Attribute Directives
-Structural Directives
1.Component Directives :
These are like the main actors in your Angular play. They combine both the user interface (HTML template) and the logic (TypeScript code) into one reusable package. Components are your building blocks for creating custom elements with unique behaviors.
Let's create a scenario where you want to display a list of games in an Angular Games Component.
Step 1: Generate the Games Component
First, generate a new component using Angular CLI:
‘ng generate component component/games’
This will create the following files:
games.component.ts
games.component.html
games.component.css
games.component.spec.ts
Step 2: Add HTML Template to Display the Games
Open games.component.html and add the following code:
The *ngFor directive iterates over a list of games and displays each game's title and genre.
The button will trigger the selectGame function, passing the selected game as a parameter.
The selected game’s name will be shown below in selectedGameMessage.
Step 3: Define Game List and Function in TypeScript File
Next, open games.component.ts and define the list of games and the function that handles game selection.
games is an array holding the list of games.
selectGame() updates selectedGameMessage with the selected game's title.
Step 4: Add the Component to the App Module
Now, register the GamesComponent in your app module. Open app.module.ts and add the new component:
Step 5: Display the Component in the Application
Finally, add the GamesComponent to your app's main view. Open app.component.html and include:
2. Attribute Directives
Attribute directives in Angular are used to change the appearance or behavior of an existing DOM element by manipulating its attributes.
ngClass
The ngClass directive allows you to dynamically apply CSS classes to an element based on conditions or expressions.
ngStyle
The ngStyle directive lets you apply inline styles to an element based on conditions or expressions.
ngModel
The ngModel directive is used for two-way data binding with form elements like input, select, and textarea.
ngIf
While ngIf is primarily a structural directive, it's also an attribute directive when used as an attribute to conditionally render elements.
ngFor
Similar to ngIf, the ngFor directive is a structural directive used for iteration, but it's also an attribute directive when used as an attribute to iterate over elements.
ngDisabled
The ngDisabled directive is used to disable or enable form elements based on a condition.
ngReadOnly
The ngReadOnly directive is used to set the read-only property of form elements.
ngSwitch and ngSwitchCase
The ngSwitch directive is used to conditionally render content based on a given expression, and ngSwitchCase is used to specify the cases.
ng-container
While not a traditional structural directive, <ng-container> is often used to group elements when you need to apply structural directives to multiple elements without introducing an additional wrapping element in the DOM. <ng-container> is a non-rendered element. It is not added to the DOM, so it doesn't introduce any additional elements or styles.It’s useful when you want to conditionally render multiple elements without wrapping them in a parent element.
ngTemplateOutlet
is a powerful feature in Angular that allows you to dynamically render templates within your components. It’s often used in combination with the ng-container element to conditionally render content or apply templates in a flexible way. ngTemplateOutlet is particularly useful when you want to reuse and render templates based on certain conditions or data.
3.Structural Directives
Structural directives in Angular 17 are a special type of directives that allow you to dynamically manipulate the DOM (Document Object Model) by adding, removing, or replacing elements based on certain conditions. These directives are prefixed with an asterisk (*) in the template syntax.
These are like the architects, reshaping your DOM by adding or removing elements. Also prefixed with *ng, they are used for more complex structural changes.
ngClass
ngClass is an Angular directive used to dynamically add or remove CSS classes from an HTML element based on an expression.
Both ngClass and ngStyle are Angular directives used to dynamically apply CSS classes and styles to elements. These directives are used in the template to conditionally apply styles or classes based on component logic.
ngStyle
ngStyle is an Angular directive used to dynamically set inline styles on an HTML element based on an expression.
Structural directives in Angular are used to change the DOM structure by adding, removing, or modifying elements based on conditions or data. They control how elements are rendered, making it possible to:
Conditionally include or exclude elements (*ngIf).
Repeat elements for each item in a collection (*ngFor).
Switch between different elements based on an expression (*ngSwitch).
References:
angular.io/guide/component-overview