Types of Attribute Directives
1. Built-in Attribute directives:
These attributes are used within html tags to modify the appearance of elements, components or directives.
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"/>
2. Custom Attribute directives
We can also create our own directives based on our own requirements. This helps us creating reusable components and validating data etc. We can also create our own directives based on our own requirements. This helps us creating reusable components and validating data etc. Custom directives can be created using the `@Directive` decorator and can implement various methods to interact with the host element and perform actions.
Attribute Directives in Angular
Attribute directives are a powerful tool that allows you to manipulate the behavior and appearance of HTML elements. In this article, you will see the fundamentals of attribute directives.
Table of Content
- What are Attribute Directive?
- Benefits of Attribute Directive
- Types of Attribute Directives
- Steps to create Custom Directives
- Example of Attribute Directives