**Angular Directive **is a class with a @Directive decorator. **Decorators **are functions that modify JavaScript classes. The decorators are used for attaching metadata to classes as it knows the configuration of those classes and how they should work. You will be surprised to know that the component is also a directive-with-a-template. The @Component decorator is a _@_Directive decorator extended with template-oriented features.

Angular Directive Example

An Angular Directive can be divided into two types:

  1. Components
  2. Structural
  3. Attribute

#Structural Directives

Structural directives reconstruct the layout by adding, removing, and replacing elements in DOM. The structural directives are responsible for shape or reshape the DOM’s structure, typically by adding, deleting, or modifying elements. Similar to the other directives, you apply the structural Directive to a _host _element. The Directive then performs whatever it is intended to do with that host element. The structural directives are straightforward to recognize. An asterisk (*) precedes the directive attribute name. It does not require brackets or parentheses like attribute directive.

#angular 9 #javascript #decorators

Angular 9 Directive Example For Beginners
1.55 GEEK