What are Angular Directives?
Directives are a way to teach HTML new tricks. During DOM compilation directives are matched against the HTML and executed. This allows directives to register behavior, or transform the DOM.
- Structural Directives
- Attribute Directives
Component decorator allows you to mark a class as an Angular component and provide additional metadata that determines how the component should be processed, instantiated and used at runtime.
Components are the most basic building block of an UI in an Angular application. An Angular application is a tree of Angular components. Angular components are a subset of directives. Unlike directives, components always have a template and only one component can be instantiated per an element in a template.
template: `<h1>Query Home</h1>`
2. Structural Directives
Structural directives are responsible for HTML layout. They shape or reshape the DOM's structure, typically by adding, removing, or manipulating elements.
As with other directives, you apply a structural directive to a host element. The directive then does whatever it's supposed to do with that host element and its descendants.
<div *ngIf="isPageEnable" class="app-name">Query Home</div>
Attributes directives are responsible for change the appearance or behavior of an element, component, or another directive.
Video for Directives
<p appHighlight>Highlight me!</p>