Skip to content

Instantly share code, notes, and snippets.

@saniyusuf
Created September 26, 2016 14:57
Show Gist options
  • Save saniyusuf/999a9cee4c429cdb693111c0ffe10ea0 to your computer and use it in GitHub Desktop.
Save saniyusuf/999a9cee4c429cdb693111c0ffe10ea0 to your computer and use it in GitHub Desktop.
<ion-card *ngFor="let track of tracks">
<img [src]="track.album.images[0].url"/>
<ion-card-content>
<ion-card-title>
{{track.name}}
</ion-card-title>
<ion-row>
<ion-col center>
<ion-icon primary name="musical-notes">
</ion-icon>
<span primary>Listen</span>
</ion-col>
<ion-col text-right="">
<ion-icon primary name="share-alt">
</ion-icon>
<span primary>Share</span>
</ion-col>
</ion-row>
</ion-card-content>
</ion-card>
Add Loading Component
Import LoadingController
Inject LoadingController & Use
import { NavController,
LoadingController } from 'ionic-angular';
let loader = this.loadingCtrl.create({
content: "Getting Your Tracks.....",
duration: 3000
});
Implement Friends List
Import Http
Inject Http & Use to query Friends List API
Implements Friends List Template
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
private friends = [];
constructor(private http: Http) {
this.http.get('http://api.randomuser.me/?results=2000&inc=gender,name,nat,email,picture&exc=gender,nat')
.map((response) => response.json().results)
.subscribe((friends) => {
this.friends = friends;
});
<ion-list *ngFor="let friend of friends">
<ion-item>
<ion-thumbnail item-left>
<img [src]="friend.picture.thumbnail">
</ion-thumbnail>
<h2>
{{friend.name.first}}
{{friend.name.last}}
</h2>
<p>{{friend.email}}</p>
</ion-item>
</ion-list>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment