Angular Directives Tutorial with Example | Types

 

Directives in Angular are the elements that are basically used to change the layout, appearance, behavior, or of the Document Object Model (DOM) element.

Basically, we can classify the Angular directives into 3 types as shown below the list.

1. Structural Directive
2. Attribute Directive
3. Component Directives
4. Custom Directives

Structural Directive

The Structural Directives are basically used to handle the element of structure or layout of the DOM. Simply, how the element should render in a template. and the main point is how to modify the design of the HTML page by simply adding or removing the elements from the DOM. 

There are mainly 3 build-in Structural directives are available in Angular.

1. NgSwitch (*ngSwitch)
2. NgFor (*ngFor)
3. NgIf (*ngIf)

Attribute Directive

The Attribute Directives are basically used to handle the element of behavior or appearance of the DOM.  

There are mainly 2 build-in Attribute directives are available in Angular.

1. NgStyle ([ngStyle])
2. NgClass ([ngClass])

Component Directives

The Component Directive is the most used directive in angular applications. if we want our own template, styles then component directives are the best choice.

The Scenarios like our own grid need for the application then using Component directive is the best choice instead of third party libraries. For Component Directives needed logic for the view in the component. 

The Component Directive is a class with the @Component decorator function. The naming convention for components is componentname.component.ts. 

For example, if we want to create a component with the name Vendor then it should be vendor.component.ts.