title: Reuse Ionic Components in Ionic 3 and Angular 4
body: <p>I have this ionic list</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ion-list&gt;
    &lt;ion-item *ngFor="let friend of (friendsObs|async)"&gt;
      &lt;h2&gt;{{friend.name}}&lt;/h2&gt;
    &lt;/ion-item&gt;
  &lt;/ion-list&gt;
  </code></pre>
  
  <p>And I want to extract the ion-item part as a component so i can reuse it somewhere else. But the following doesn't work as I want it.</p>
  
  <pre class="lang-js prettyprint-override"><code>@Component({
    selector: 'friend-item',
    template: '
      &lt;ion-item&gt;
        &lt;h2&gt;{{friend.name}}&lt;/h2&gt;
      &lt;/ion-item&gt;'
  })
  export class FriendItemComponent {
    @Input() friend: Friend;
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ion-list&gt;
    &lt;friend-item *ngFor="let friend of (friendsObs|async)" [friend]='friend'&gt;
  &lt;/ion-list&gt;
  </code></pre>
  
  <p>This was working but i later found out the content is being wrapped in  and the layout is not as expected, like following.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ion-list&gt;
    &lt;friend-item&gt;
      &lt;ion-item&gt;
        &lt;h2&gt;Friend's Name&lt;/h2&gt;
      &lt;/ion-item&gt;'
    &lt;/friend-item&gt;
  &lt;/ion-list&gt;
  </code></pre>
  
  <p>What is the correct way to do it?</p>