These are chat archives for angular/angular-2-ionic-2

9th
Feb 2016
aderito7
@aderito7
Feb 09 2016 15:01
Sorry to flood the space. I would imagine this is straightforward simple, but it seems I'm missing something because my view does not update with information when it comes back from Firebase. This is all information I can give and maybe also I can tell you I am using boilerplate from ionic having typed ionic start MyProject --v2 --ts How can I make items appear on template once they return
<ion-navbar *navbar>
  <button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
  <ion-title>News Source</ion-title>
</ion-navbar>

<ion-content>
    <ion-list *ngIf="items">
        <ion-item *ngFor="#item of items">
            <ion-thumbnail>
                <img src={{item.src}}>
                <h2>{{item.title}}</h2>
                <p>{{item.atl}}</p>
                <button clear item-right (click)="open(item.href)">Open</button>
            </ion-thumbnail>
        </ion-item>
    </ion-list>
</ion-content>
import { Injectable } from 'angular2/core';
import { Observable } from 'rxjs/Rx';

@Injectable()

var ref = new Firebase('https://mysecretapi.firebaseio.com');

declare var Firebase;

export class NewsService {

    constructor() {

    }

    get(source) {
        return new Observable(observer => {
            ref.once('value', snapshot => {
                observer.next(snapshot.val().News[source]);
                observer.complete();
            });
        });
    }
}
import {Page, NavController, NavParams} from 'ionic-framework/ionic';
import { NewsService } from '../../shared/services/news-service';


@Page({
  templateUrl: 'build/pages/news/news.html',
  provider: [NewsService]
})

export class News {
  items: Array<{title: string, src: string, href: string, alt: string}>;

  constructor(private nav: NavController, navParams: NavParams, newsService: NewsService) {

    var subscription = newsService.get('newssource').subscribe(
            val => this.items = val,
            err => console.log(err),
            () => {
                subscription.unsubscribe();
            }
        ) 
  }
}