DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป is a community of 963,864 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Vaibhav
Vaibhav

Posted on • Updated on

What is Directives in Angular ?

Alt Text
If you have been working on Angular you must heard the keyword Directive. What is Directives in Angular ?
Lets take a look!
Directive is a Decorator that marks a class as an Angular directive. You can define your own directives to attach custom behavior to elements in the DOM.
So how many types of Directives exist in Angular?
Basically, there are three types of Directives that exist in Angular. But it's not done you can also create your own Directive in Angular. Will discuss...
1 #Component Directive
Components are just directives with templates they use the directive API and give us a cleaner way to define them. it doesn't manipulate the Dom it creates them.

Alt Text

2 #Structural Directive
Structure directives manipulate the DOM elements. These directives have a * sign before the directive. For example, *ngIf and *ngFor etc.

Alt Text

3 #Attribute Directives
Attribute directives are used to change the look and behavior of the DOM element. For Example, NgStyle, NgClass etc.

Note* Structural Directive is used to manipulate the Dom while Attribute directives are used to change the look and behavior of the DOM element.

Top comments (2)

Collapse
 
sharmakushal profile image
Kushal sharma

good one vaibhav

Collapse
 
15vaibhav profile image
Vaibhav Author

Thanks

This post blew up on DEV in 2020:

js visualized

๐Ÿš€โš™๏ธ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! ๐Ÿฅณ

Happy coding!