I am working on my first angular2 application with typescript. I have successfully fetched results using fetchApi but I am struggling to display them in the views. Can someone please guide me on how to present my data in the views? Thank you.
App.components.ts
///<reference path="../node_modules/angular2/typings/browser.d.ts"/>
import {Component} from "angular2/core";
import {Mallspk} from './mallspk'
import {NgFor} from "angular2/common";
export class Hero{
id:number;
name:string;
}
@Component({
selector: 'my-app',
template: '<input type="text" [(ngModel)]="title" /><h1>{{title}}</h1>'
})
export class AppComponent
{
title="Tour of Heroes";
hero: Hero={
id:1,
name:"Qasim"
};
}
@Component({
selector:"my-app-selector",
bindings:[Mallspk],
template:`
<input type="search" [(ngModel)]="search" #photoQuery />
<button (click)="searchPhotos(photoQuery.value)">Search photos</button>
<ul>
<li *ngFor="#photo of photos">
<table>
<tr>
<td>
{{photo.title}}
</td>
<td>
photo.isActive
</td>
<td>
<img [src]="photo.imageUrl" width="250px">
</td>
</tr>
</table>
</li>
</ul>
`,
directives: [NgFor]
})
export class PhotoView{
mallspk=null;
photos=null;
search=null
constructor(mallspk:Mallspk){
this.mallspk=mallspk;
this.search="text"
}
searchPhotos(query){
this.mallspk.searchPhotos(query).then((photos)=>{
console.log(photos);
this.photos=photos.data.collection.brands;
});
}
}
main.ts
import {bootstrap} from "angular2/platform/browser";
import {AppComponent, PhotoView} from "./app.components";
bootstrap(AppComponent);
bootstrap(PhotoView)
insex.html
<html>
<head>
<title>Angular 2 QuickStart</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
<br>
<my-app-selector></my-app-selector>
</body>
</html>
mallspk.ts
declare var fetch;
export class Mallspk{
searchPhotos(query) {
return fetch(`http://www.malls.pk/api/index.php/malls/mall?city_name=Lahore&city_name=Lahore&lat=12&lng=23`).then(function(response) {
return response.json();
});
}
}