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 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.