Skip to main content

Directives

  • transform the DOM

Table of Contents​

  1. Component Directives
  2. Structural Directives
  3. Attribute Directives

Angular directives are functions, while React components are classes or functions with specific return types.

  • an HTML enhancer.
  • Directives allow you to teach an old HTML element new tricks.
  • HTML view encapsulation, HOWEVER @Directive does not accept styles and styleUrls so it could break styles defined in a surrounding component

There are Three Types of Directives in Angular:​

Component Directives​

Directives with a template

Structural Directives​

  • Typically prefixed with an asterisk (*) in the template.
  • change the DOM (layout) by adding, removing, or rearranging elements.
  • The directive changes the structure of the component’s template.

ngIf

  • allow us to perform conditional logic
<div *ngIf='boolean'> <!--host element -->
    <p></p> <!-- child element -->
</div>

shorthand of ngForOf directive

*ngFor

  • Iterates over a collection and creates elements for each item.

Attribute Directives​

  • Attribute directives are like modifiers that change the appearance or behavior of a component, HTML element, or other directives

Examples​

  • ngClass: Dynamically adds or removes CSS classes.
  • ngStyle: Dynamically sets inline styles.
  • [disabled]: Enables or disables form controls.