# Container vs. Presentational Components

Supposons que nous disposons dans notre composant `app`, d'une liste `bookList` contenant une liste d'instance d'une classe `Book` que nous souhaitons afficher.

{% tabs %}
{% tab title="book/book.ts" %}

```typescript
export class Book {

    title?: string;

    constructor(args: Book = {}) {
        this.title = args.title;
    }

}
```

{% endtab %}
{% endtabs %}

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

```typescript
import { Book } from './book/book';

...
export class AppComponent {
    bookList = [
        new Book({
            title: 'eXtreme Programming Explained'
        }),
        new Book({
            title: 'ReWork'
        })
    ];
};
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
Laissez bien sûr l'IDE s'occuper des imports via l'auto-complete ou l'auto-import *(Alt + Enter chez JetBrains)*.
{% endhint %}

![IntelliJ Class Completion](/files/-LAxjo1na3vnXV8LmPkZ)

![IntelliJ Auto Import](/files/-LAxiuLg3ZGiqWdvCRxL)

Il serait intéressant de déléguer l'affichage de chaque `book` au composant `book-preview` que nous pourrons réutiliser plus tard dans d'autres contextes.

Dans ce cas, nous séparons les responsabilités entre le composant `app` et le composant `book-preview`.

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

```markup
<!-- Display one book-preview component for each book... -->
<!-- ...but we need to find some way to pass the book to each component. -->
<wt-book-preview
        *ngFor="let book of bookList"></wt-book-preview>
```

{% endtab %}
{% endtabs %}

## Container Component *(ou Smart Component)*

Le composant `app` **s'occupe donc de la "business logic"** et sélectionne les objets `book` à afficher via la propriété `bookList`.\
Il est donc un "Container Component" qui délègue l'affichage à des "Presentational Components".

## Presentational Component *(ou Dumb Component)*

Le composant `book-preview` ne sait pas d'où provient le `book` à afficher mais il sait l'afficher.\
Il est donc un "Presentational Component" qui est débarrassé de la "business logic".

## Article plus détaillé sur le sujet

{% embed url="<https://blog.wishtack.com/2017/05/05/the-guide-to-building-quality-angular-2-components/>" %}

## Interaction entre Composants

Il ne reste plus au composant app qu'à communiquer chaque `book` au composant `book-preview` associé. Cf. [Interaction entre Composants](/angular/interaction-entre-composants.md).


---

# 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/container-vs.-presentational-components.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.