Angular Directive

Angular Directive

Angular Directive

We will learn about angular directive in this post. So far we have learned about angular component, event binding and how to use them. Now it’s time you should know about angular directive. There are plenty of existing angular directives but angular provides you a way to create your own as well.


What is Angular directive

In simple definition,

Angular Directive let’s you add behavior to an existing DOM element.

I hope you understood the definition. If not, let’s make it even more clear from the below diagram.



Angular Directive



The three types of directives in Angular 2 are attribute directives, structural directives, and components.

Component
– We have already learned about the components. Basically, components are sub set of directive but components have their own view (Template).

Structural Directives – Structural directives change the DOM layout by adding and removing DOM elements.

Structural directive starts with the sign “*”, so it is easy to recognize them in your template file like *ngIf, *ngFor and *ngSwitch etc. We will learn more about them in our next section.

Attribute Directives – Attribute directives change the appearance or behavior of an element.


What is the different between Angular Directive and Components

In Angular 2 components are actually just directives internally. So what makes them different from the other two types of directives?

Well, Components are special directives with their own template attached to it.

We will learn more about angular directive later in my next tutorials. We will learn more about some angular 2 build in directive which you can use directly into your HTML template.

Related Post

Leave a Reply

Your email address will not be published. Required fields are marked *