# 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](https://4009647861-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9vDDYxu6nH7FVBtFFS%2F-LAx_IRd3hIfIDsY_beq%2F-LAxjo1na3vnXV8LmPkZ%2Fintellij-class-completion.gif?alt=media\&token=3a829e78-b2c6-4f1e-b45f-11dc1725e7fd)

![IntelliJ Auto Import](https://4009647861-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9vDDYxu6nH7FVBtFFS%2F-LAx_IRd3hIfIDsY_beq%2F-LAxiuLg3ZGiqWdvCRxL%2Fintellij-auto-import.gif?alt=media\&token=6764f1a4-81e4-4b0a-8856-6615cea4966c)

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](https://guide-angular.wishtack.io/angular/interaction-entre-composants).