> For the complete documentation index, see [llms.txt](https://guide-angular.wishtack.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://guide-angular.wishtack.io/angular/container-vs.-presentational-components.md).

# 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).