Directives are the special markers in your HTML that tell Angular to attach specific behavior to DOM elements or even transform the DOM structure entirely.
1The Directive Trinity
Angular categorizes directives into three types. First, Components are the most common; they manage a specific patch of screen. Second, Structural Directives (*ngIf, *ngFor) are the architects; they physically add or remove elements from the DOM. Third, Attribute Directives ([ngClass], [ngStyle]) are the decorators; they modify the attributes and styles of existing elements without changing the structure.
2Asterisk vs Brackets
The syntax of a directive tells you its purpose. An asterisk (*) like in *ngIf indicates that the directive is structural and will use a <ng-template> behind the scenes to manage the layout. Square brackets [] like in [ngClass] indicate that the directive is an attribute directive, treating the directive name as a property of the host element.
