# Structural Directive

Les "Structural Directives" permettent de **manipuler le DOM** en ajoutant ou en retirant des éléments.

Les "Structural Directives" natives les plus utilisées sont `ngIf` et `ngFor`.

Les "Structural Directives" sont généralement utilisées en préfixant les directives par un astérisque :

```markup
<h1 *ngIf="book != null">{{ book.title }}</h1>
```

Il s'agit d'un raccourci pour la syntaxe suivante :

```markup
<ng-template [ngIf]="book != null">
    <h1>{{ book.title }}</h1>
</ng-template>
```

Le tag `ng-template` est un tag particulier qui **n'affiche pas les éléments qui y sont contenus** mais les rend **disponible aux directives** appliquées dessus **par l'injection de la classe `TemplateRef`**.

La directive `ngIf` a donc accès au template en injectant la classe `TemplateRef` ; elle décide ensuite d'insérer ou non ce template dans la vue en fonction de la valeur de l'expression `book != null`.

```typescript
export class SomeStructuralDirective {

    constructor(
        private _templateRef: TemplateRef,
        private _viewContainerRef: ViewContainerRef
    ) {
    }
    ​
    hide() {
        this._viewContainerRef.clear();
    }
    ​
    show() {
        this._viewContainerRef.createEmbeddedView(this._templateRef);        
    }

}
```

{% hint style="danger" %}
Pour une meilleure maintenabilité et stabilité de vos applications, évitez l'implémentation de "Structural Directives".
{% endhint %}


---

# 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://guide-angular.wishtack.io/angular/directives/structural-directive.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.