Angular Directives

In this article we discuss Angular Directives. Before starting this article please go through the link Two way data binding in Angular. We cover below points in this article,

• What are Angular Directives ?
• What are the different types of directives available in the Angular Framework ?

➤ What are Angular Directives ?

The Angular Directives are the elements which are basically used to change the behavior or appearance or layout of the DOM (Document Object Model) element. In other words, we can say that the directives are basically used to extend the power of HTML attributes and to change the appearance or behavior of a DOM element.

➤ Types of Directives in Angular

The directives in angular are classified into three types. They are as follows:

• Structural Directive
• Attribute Directive
• Component Directives

 ➥ Structural Directives

The Structural Directives are responsible for the HTML layout. That means, they will shape or reshape the HTML view by simply adding or removing the elements from the DOM. These directives are basically used to handle how the component or the element should render in a template.

In Angular, there are three structural directives are available. They are as follows:

• NgFor (*ngFor)
• NgIf (*ngIf)
• NgSwitch (*ngSwitch)

➥ Attribute Directives

Attribute Directives are basically used to modify the behavior or appearance of the DOM element or the Component. In Angular, there are two in-built attribute directives available. They are as follows:

• NgStyle: This NgStyle Attribute Directive is basically used to modify the element appearance or behavior.
• NgClass: This NgClass Attribute Directive is basically used to change the class attribute of the element in the DOM or in the Component to which it has been attached.

➥ Component Directives

The Component is a type of directive in angular with its own template, styles, and logic needed for the view. The Component Directive is the most widely used directive in the angular application and you cannot create an angular application without a component.

A component directive requires a view along with its attached behavior and this type of directive adds DOM Elements. The Component Directive is a class with @Component decorator function.

The naming convention for components is name.component.ts. For example, if you want to create a component with the name employee then it should be employee.component.ts.

  Summary

 In this tutorial we discussed Angular Directives. If have any question related to this topic then give your feedback.

You May Also Like...

• Angular Property Binding
• Angular Data Binding
• Angular Interpolation
• Angular Template VS Templateurl
• Getting Started with Angular 8 using TypeScript
• ngx-toastr in angular 8 | Part-2
• ngx-toastr in angular 8
• How to create Angular 8 Project using Angular CLI
• Angular 8 Project Structure
• Angular 8 Architecture