<ion-header>
  <ion-navbar>
    <ion-title>
      Example List Component
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h2> basic List</h2>
  <ion-list >
    <ion-item *ngFor="let ms of musics">
      รหัสสินค้า <h2>{{ ms.id}}</h2>
      ชื่อเพลง <h2>{{ ms.name}}</h2>
    </ion-item>
  </ion-list>
  <h2> No Line </h2>
  <ion-list no-lines >
    <ion-item *ngFor="let mv of movies " >
      {{ mv }}
    </ion-item>
  </ion-list>
  <h2>inset</h2>
  <ion-list inset>
  <ion-item *ngFor="let fb of footballs" >
    <h3>Team: {{ fb.name }}</h3>
    <h4> Budget: {{ fb.budget }}</h4>
  </ion-item>
  </ion-list>
  <h2> Dividers </h2>
  <ion-item-group>
    <ion-item-divider color= "dark" >T</ion-item-divider>
    <ion-item >Teera </ion-item>
    <ion-item >Teerawat </ion-item>
    <ion-item >Teerawit</ion-item>
  </ion-item-group>
  <h2>Headers</h2>
  <ion-list-header color= "danger" >
    Student
  </ion-list-header >
  <ion-item >Fitree</ion-item>
  <ion-item >iffan</ion-item>
  <ion-item >Ameen</ion-item>


  <h2>Icons</h2>
  <ion-list >
    <ion-item *ngFor="let ic of icons">
      <ion-icon name="{{ ic }}"></ion-icon>
    </ion-item>
  </ion-list>

  <h3>Avatar</h3>
  <ion-list >
      <ion-item *ngFor="let dm of doraemons">
    <ion-avatar item-left>
        <img src="../../assets/imgs/{{dm.photo}}">
    </ion-avatar>
    <h2>{{ dm.name }}</h2>
      <p>{{ dm.grade}}</p>
    </ion-item>
  </ion-list>

  <h2>Sliding</h2>
 <ion-list>
   <ion-item-sliding *ngFor="let dm of doraemons" >
     <ion-item>
       <ion-avatar item-start>
         <img src="../../assets/imgs/{{dm.photo}}">
       </ion-avatar>
       <h2>{{dm.name}}</h2>
     </ion-item>
     <ion-item-options side="left">
       <button ion-button  color="secondary">
         <ion-icon name="call"></ion-icon>
         call
       </button>
       <button ion-button  color="primary">
          <ion-icon name="text"></ion-icon>
          text
        </button>
     </ion-item-options>
     <ion-item-options side="right">
       <button ion-button  color="danger">
        <ion-icon name="trash"></ion-icon>
        delete
      </button>
     </ion-item-options>
   </ion-item-sliding>
  </ion-list>

</ion-content>