# 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:

```markup
<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](https://fancyloves.gitbook.io/frontendtech/angularjs/fundamentals/directives/ngif)

### Built-it structural directives

* `*ngFor` is an iterative; it tells Angular to stamp out one \<li> per hero in the heroes list.
* `*ngIf`&#x20;
  * 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.&#x20;
* `*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.

```markup
<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](https://angular.io/guide/template-syntax#ngStyle)
* [ngClass](https://angular.io/guide/template-syntax#ngClass)
* [ngForm](https://angular.io/api/forms/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.

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

```markup
<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>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://fancyloves.gitbook.io/frontendtech/angularjs/fundamentals/directives.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.