Directives

A directive is a class with a @Directive decorator.

There are two kinds of directives besides components: structural and attribute directives. You can apply many attribute directives to one host element. You can only apply one structural directive to a host element.

Just as for components, the metadata for a directive associates the class with a selector that you use to insert it into HTML. In templates, directives typically appear within an element tag as attributes, either by name or as the target of an assignment or a binding.

A component is technically a directive. It's a directive with a template.

Components are so distinctive and central to Angular applications that Angular defines the @Component decorator, which extends the @Directive decorator with template-oriented features.

Structural directives

Structural directives alter layout by adding, removing, and replacing elements in DOM. The example template uses two built-in structural directives to add application logic to how the view is rendered:

<li *ngFor="let hero of heroes"></li>

<app-hero-detail *ngIf="selectedHero"></app-hero-detail>
<p *ngIf="heroes.length > 3">There are many heroes!</p>

• You can only apply one structural directive to an element.

• Use <ng-container> to group elements when there is no suitable host element for the directive, or when you need both an *ngFor and an *ngIf on the same host element

• Structural directives can be desugared into the <ng-template> element form. See NgIf

Built-it structural directives

• *ngFor is an iterative; it tells Angular to stamp out one <li> per hero in the heroes list.

• *ngIf

  • is a conditional

  • The ngIf directive doesn't hide elements with CSS. It adds and removes them physically from the DOM.

  • it includes the HeroDetail component only if a selected hero exists.

• *ngSwitch

[R] https://angular.io/guide/template-syntax#built-in-structural-directives

[R] https://angular.io/guide/structural-directives

Attribute directives

Attribute directives alter the appearance or behavior of an existing element. In templates they look like regular HTML attributes, hence the name.

<input [(ngModel)]="hero.name">
<div [style.font-size]="isSpecial ? 'x-large' : 'smaller'" >
  This div is x-large or smaller.
</div>
<div [class.special]="isSpecial">The class binding is special</div>

Built-in attribute directives

• ngModel

  • two-way data binding:

  • is an example of an attribute directive. ngModel modifies the behavior of an existing element (typically an <input>) by setting its display value property and responding to change events.

• ngStyle
• ngClass
• ngForm

[R] https://angular.io/guide/template-syntax#built-in-attribute-directives

[R] https://angular.io/guide/attribute-directives

ng-container

The <ng-container> is a syntax element recognized by the Angular parser.

It's not a directive, component, class, or interface.

<p>
  I turned the corner
  <ng-container *ngIf="hero">
    and saw {{hero.name}}. I waved
  </ng-container>
  and continued on my way.
</p>

<div>
  Pick your favorite hero
  (<label><input type="checkbox" checked (change)="showSad = !showSad">show sad</label>)
</div>
<select [(ngModel)]="hero">
  <ng-container *ngFor="let h of heroes">
    <ng-container *ngIf="showSad || h.emotion !== 'sad'">
      <option [ngValue]="h">{{h.name}} ({{h.emotion}})</option>
    </ng-container>
  </ng-container>
</select>