Directives are instructions in the DOM. They specify how to place your components and business logic in the Angular.
Directives are js class and declared as @directive. There are 3 directives in Angular.
Component Directives: Component directives are used in main class. They contain the detail of how the component should be processed, instantiated and used at runtime.
Structural Directives: Structural directives start with a * sign. These directives are used to manipulate and change the structure of the DOM elements. For example, *ngIf and *ngFor.
Attribute Directives: Attribute directives are used to change the look and behavior of the DOM elements. For example: ngClass, ngStyle etc.
Difference between Attribute Directive and Structural Directive
How to create custom Directives?
You can create your own custom directives to use in Angular components.
Create a basic attribute directive
You have seen the attribute directive like ngClass and ngStyle. Now, it's time to create our own attribute directives.
First, create a folder. Let's name it "simple-style". Then, create a file within that folder named as "simple-style.directive.ts"
Now, you have to inform Angular that you have a new directive. So, you have to add SimpleStyleDirective to app.module.ts and also import it.
Now, your directive is created. Let's check it. Open app.component.html and use your created SimpleStyleDirective
<p appSimpleStyle>Style me with your created SimpleStyleDirective</p> </p>
You can see that your created attribute directive is working. Here, you have learnt how to create selector, how to create attribute directory, and also learnt how to use and also how to use