Attribute Directives
In Angular, Attribute directives are used within html tags to modify the appearance of elements, components or directives. They are used for Dynamic Styling, DOM Manipulation etc.
Features of Attribute Directives :
- Dynamic Styling: Attribute directives can be used to dynamically apply styles to HTML elements based on certain conditions.
- DOM Manipulation: They enable you to interact with and manipulate the DOM based on user actions or application state changes.
- Reusability: Attribute directives promote code reuse by encapsulating behavior that can be applied to multiple elements across the application.
- Enhanced Functionality: They allow you to extend HTML with custom functionality, improving the overall user experience.
We have 3 main built in attribute directives: ngClass, ngStyle and ngModel.
1. ngClass
This attribute is used to conditionally give the classes to the elements based on the value binded to ngClass directive.
Syntax:
<element [ngClass]="expression"></element>
2. ngStyle
This attribute is used to dynamically apply the styles to elements based on the value binded to ngStyle directive. It helps us to modify the appearance of elements on conditional basis. We can also use ngStyles to override in
Syntax:
<element [ngStyle]="expression"></element>
3. ngModel
This attribute is generally used to bind form control data to a class variable . This allows a two way binding and this is most commonly used directive with forms. It also comes with few basic validations like required,minLength , maxLength which can be directly used in our input tags.
To use this directive we need to import Forms Module in our module file.
Syntax:
<input name="name" [(ngModel)]="name"/>
Example demonstrating all three attribute directives :
<!-- app.component.html -->
<form>
<div>
<label>Name: </label>
<input
type="text"
name="name"
minlength="4"
[(ngModel)]="name"
#nameInput="ngModel"
required
[ngClass]="{ 'is-invalid': nameInput.touched && nameInput.invalid }"
/>
<div *ngIf="nameInput.touched && nameInput.invalid">
Minimum length of name is 4 characters
</div>
</div>
<div>
<label>Age: </label>
<input
type="number"
name="age"
[(ngModel)]="age"
#ageInput="ngModel"
required
[ngStyle]="{
'border-color': ageInput.invalid && ageInput.touched ? 'red' : ''
}"
/>
<div *ngIf="ageInput.touched && ageInput.invalid">Age is required</div>
</div>
</form>
//app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
name: string = '';
age!: number;
}
Output:
In this example we have used all the three attribute directives , and displayed the errors using ngClass , ngStyle. We have stored the values of the fields using ngModel .
Difference between structural and attribute directives
Structural directives manipulate the DOM layout by adding, removing, or replacing elements, while attribute directives modify the appearance or behavior of elements without affecting their structure. Directives in Angular are nothing but the classes that allow us to add and modify the behavior of elements. Using directives in angular we can modify the DOM (Document Object Module) styles, handle user functionality, and much more.
Table of Content
- Structural Directives
- Attribute Directives
- Differences between structural and attribute directives
There are mainly two types of directives Structural Directives and Attribute Directives. In this article let us learn more about these directives
Contact Us