CODEWITHSUNDEEP
angularionic-framework
Nicholas
Nicholas

Reputation: 509

Reuse Ionic Components in Ionic 3 and Angular 4

I have this ionic list

<ion-list>
  <ion-item *ngFor="let friend of (friendsObs|async)">
    <h2>{{friend.name}}</h2>
  </ion-item>
</ion-list>

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.

@Component({
  selector: 'friend-item',
  template: '
    <ion-item>
      <h2>{{friend.name}}</h2>
    </ion-item>'
})
export class FriendItemComponent {
  @Input() friend: Friend;
}

<ion-list>
  <friend-item *ngFor="let friend of (friendsObs|async)" [friend]='friend'>
</ion-list>

This was working but i later found out the content is being wrapped in and the layout is not as expected, like following.

<ion-list>
  <friend-item>
    <ion-item>
      <h2>Friend's Name</h2>
    </ion-item>'
  </friend-item>
</ion-list>

What is the correct way to do it?

Upvotes: 2

Views: 1193

Answers (1)

Simon H&#228;nisch
Simon H&#228;nisch

Reputation: 4958

The template string in your @Component decorator is not a valid string. If you want to do it as a multi-line string, you should use the ES6 template literals (see template literals on MDN).

That means you have to use back ticks instead of single or double quotes:

@Component({
  selector: 'friend-item',
  template: `
    <ion-item>
      <h2>{{friend.name}}</h2>
    </ion-item>`
})
export class FriendItemComponent {
  @Input() friend: Friend;
}

Upvotes: 2

Related Questions