# \*ngIf

Alors que le [template interpolation](/angular/composants/template-interpolation.md) et le [property binding](/angular/composants/property-binding.md) permettent de modifier l'affichage et le contenu, ils ne permettent pas de modifier la structure du DOM en ajoutant ou en retirant des éléments par exemple.

Pour remédier à cette limitation, Angular fournit des **directives structurelles** qui permettent de modifier la structure du DOM.

L'une de ces directives les plus utilisées est le `ngIf`.

Si l'expression associée à la directive est "falsy" alors l'élément et son contenu sont retirés du DOM *(ou jamais ajoutés).*

{% tabs %}
{% tab title="src/app.component.html" %}

```markup
<button *ngIf="isAvailable">BUY</button>
```

{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="src/app.component.ts" %}

```typescript
...
export class AppComponent {
    isAvailable = false;
}
```

{% endtab %}
{% endtabs %}

## \*ngIf vs "safe navigation operator"

Les expressions utilisées à l'intérieur ne sont donc jamais évaluées et dans certains cas cela évite certaines erreurs.

{% tabs %}
{% tab title="src/app.component.html" %}

```markup
<div>
    <span>{{ book.name }}</span>
</div>
```

{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="src/app.component.ts" %}

```typescript
...
export class AppComponent {
    book = null;
}
```

{% endtab %}
{% endtabs %}

```
TypeError: Cannot read property 'name' of undefined
```

Il suffit alors d'utiliser `ngIf` pour retirer tout le bloc *(si cela est nécessaire)*.

{% hint style="warning" %}
Si le cas ne doit jamais se produire alors il vaut mieux déclencher une erreur bien bruyante plutôt que de camoufler le problème.
{% endhint %}

{% tabs %}
{% tab title="src/app.component.html" %}

```markup
<div *ngIf="book">
    <span>{{ book.name }}</span>
</div>
```

{% endtab %}
{% endtabs %}

Angular propose également une opérateur de "safe navigation" qu'il vaut mieux éviter car les éléments sont présents dans le DOM mais vides et cela peut avoir des impacts sur l'affichage et le styling.

{% tabs %}
{% tab title="src/app.component.html" %}

```markup
<div>
    <span>{{ book?.name }}</span>
</div>
```

{% endtab %}
{% endtabs %}

## `switch / case` & `if / then / else`

Angular propose des directives pour implémenter des "`switch / case`" et des `"if / then / else`" dans les templates.

<https://angular.io/api/common/NgIf>\
<https://angular.io/api/common/NgSwitch>

{% hint style="danger" %}
Nous vous recommandons d'éviter leur utilisation pour des raisons de lisibilité et de maintenabilité.

Pour répondre à ce genre de besoins, Angular propose des solutions bien plus élégantes avec l'injection dynamique de composants par exemple *(sujet abordé plus tard dans ce guide)*.

Chez Wishtack, nous considérons l'usage de "`if / else`" et de "`switch / case`" comme des codes smells peu importe le langage. Leur utilisation dans des templates est un code smell encore plus fort.
{% endhint %}

## Prochains workshops : 10% de réduction avec le code GUIDEANGULAR

{% embed url="<https://www.eventbrite.com/e/angular-unit-testing-workshop-fondamentaux-tdd-francais-tickets-132818877839>" %}
Angular Unit-Testing Workshop - Fondamentaux & TDD
{% endembed %}


---

# 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/composants/ngif.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.