|<- [[Using more complex data]]|[[Using multiple subcomponents]] ->|

Lorsque l'on conçoit une application complexe, ce peut être un bonne idée de diviser un component en plusieurs subcomponents.

property-binding

<code>
<ul>
  <li *ngFor="#item of objets">
    <custom-element [element]=item></custom-element> // à l'intérieur de ce loop item devient element comme spécifié
  </li>
</ul>
</code> 

+custom-element.component.ts
<code>
import {Component} from 'angular2/core';

@Component ({
  selector: 'custom-element',
  templateUrl: 'partials/customelement.html',
  inputs: ['data']
})

export class CustomElementComponent {}
</code>

<code>
import {Component} from 'angular2/core';
import {CustomElementComponent} from './custom-item.component';

@component({
  (…)
  directives: [CustomElementComponent]
})
</code>


=== styles ===

Angular importe les styles dans le head, mais y injecte des informations additionnelles, en l'occurence des sélecteurs d'attributs. Cela peut empêcher les styles d'être appliqués aux subcomponents. Il faut donc séparer apparemment les styles Component/subComponent.