This is the third post in the series of building a HackerNews clone with Angular 2, Angular Material and Firebase. This post we will setup firebase and we will pull in and display the top stories, new stories from hackernews. Previous posts : Setting up Angular2 and Angular Material with Angular CLI. Components and Routers — Initial Setup Next post: Dynamic Components, Routing Params and Refactor Create an account with here and create a new project, we need only the API key for this project for now. After creating the project grab the API key from the project by clicking on . Firebase Add firebase to web app We will be using — official library for Firebase and Angular2. We will use moment and angular2-moment for date time manipulations. AngularFire2 Below are the setups that we will be doing in this post, Configure AngularFire, Firebase, Moment and Angular 2 Moment to our application Create a service to interact with HackerNews Firebase API Register our service to app module Create a new module for shared components under shared ( Story Component to be shared across modules like top stories, newest stories) Create a new module for Top Stories and pull in top 100 from the service Update newest module to pull in the newest stories with shared component and service. Update the to load top stories as default. app.routing.ts #STEP 1 npm install angularfire2 firebase moment angular2-moment --save Open up import dependencies and configure AngularFire. For databaseURL will be using the HackerNews Firebase Database Url provided in the Take sometime to go through the API documentation, understanding the API is important. app.module.ts documentation. import { AngularFireModule } from 'angularfire2';import * as firebase from 'firebase';import * as moment from 'moment'; ({declarations: [AppComponent,HeaderComponent],imports: [BrowserModule,MaterialModule.forRoot(),RouterModule.forRoot(routes), ,NewestModule],providers: [],bootstrap: [AppComponent]}) @NgModule AngularFireModule.initializeApp({apiKey: '<API_KEY>',databaseURL: ' https://hacker-news.firebaseio.com' ,authDomain: '<AUTH_DOMAIN>' }) #STEP2 Under — we are going to create folder which will host our shared code for our application like utils, services, etc., Right now we are creating our hackernews service. /src/app shared As we registered AngualrFire in our app module — the configuration will be accessible across the application. Open up hacker-news.service.ts import { Injectable } from ' ';import { AngularFire, FirebaseListObservable } from 'angularfire2'; @angular/core ()export class HackerNewsService { @Injectable constructor(private af: AngularFire) { } getNewestStories(limit: number) {return this.af.database.list('/v0/newstories', {query: {limitToFirst: limit,orderByKey : true}});} getItem(id: number) {return this.af.database.object('/v0/item/' + id);} } Here we are creating an class with three methods. injectable — Returns ids of newest stories with a limit passed getTopStories — Returns ids of newest stories with a limit passed. getNewestStories — Returns the single item object. getItem — _What database is this accessing ?_As the configuration is across the application. We configured AngularFire in our to access HackerNewsAPI on Firebase ( ) . this.af.database.list('v0/newstories') app.module.ts docs The cool thing in AngularFire2 is you can pass an Observable to query properties like limit, etc., instead of a number — docs #STEP3 Register our hacknews service to our services module. import { NgModule } from ' ';import { HackerNewsService } from './hacker-news.service'; @angular/core ({imports: [],exports : [],declarations: [],providers: []})export class ServicesModule{static forRoot() {return {ngModule: ServicesModule,providers: [HackerNewsService]}}} @NgModule export {HackerNewsService} The last three lines is a helper I write always so I can access all the services from within application from this single module instead of going to individual folder in the import statement. You can see the import statement for HackerNewsService in Step4. # STEP4 Generate a module under folder and generate a component Components shared ng g component story We are going to create a component which takes as an input — retrieves the item from and renders it. id HackerNewsService We have a method for the property id, when the id changes we call the to retrieve the new story. setter HackerNewsService Import from and from . We will use component from to display our story. Below is our template file, I am using from angular2-moment to display the time. MomentModule angular2-moment MdCardModule angular-material md-card angular-material pipes Styles for the story component #STEP5 Create a new module and component for top stories — refer to the previous blog post I will show the component and the markup first, then we will go one by one to see what it does. I am pasting a screenshot of the code so it is well formatted. We are importing MdCardModule in _topstories.module.ts_ as we will using in our template to display each story So we are importing from respective modules. HackerNewsService, FirebaseListObservable I am getting the top 100 stories from the top stories in hackernews which is currently configured at property within our component. limit On — We are calling the to get the top 100 stories. ngOnInit HackerNewsService method — is used in the section of in our template. trackByForStory [trackBy](https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html) ngFor #STEP6 Perform similar steps on top stories to update the . newest component #STEP7 Open the and update the path to redirect to and add a new route. app.routing.ts topstories Thats the top stories page. The app is deployed in firebase hosting (another post). The url is . and the repo is actively worked around. https://hackernews-clone.firebaseapp.com/

Google

Twitter

Naive Infinite scroll in Reactive Programming using RxJS Observables

Too Long; Didn't Read

Make resilience your competitive advantage

Angular2 -HackerNews clone Firebase setup with observables — Realtime

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Angular — Simple In Memory Cache Service with RxJS

Reusing $mdDialog in Angular Material

Stop Wasting Time on Country Dropdowns – This Angular Tool Does It All!

3 Ways to Pass Async Data to Angular + Child Components

How does Angular2 work? Part 1 — Application Refs

Angular — Simple In Memory Cache Service with RxJS

Reusing $mdDialog in Angular Material

Stop Wasting Time on Country Dropdowns – This Angular Tool Does It All!

3 Ways to Pass Async Data to Angular + Child Components

How does Angular2 work? Part 1 — Application Refs

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps