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" %}
export class Book {
title?: string;
constructor(args: Book = {}) {
this.title = args.title;
}
}{% endtab %} {% endtabs %}
{% tabs %} {% tab title="app.component.ts" %}
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 %}
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" %}
<!-- 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 %}
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".
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".
{% embed url="https://blog.wishtack.com/2017/05/05/the-guide-to-building-quality-angular-2-components/" caption="" %}
Il ne reste plus au composant app qu'à communiquer chaque book au composant book-preview associé. Cf. Interaction entre Composants.