About

Back in 2016, I made a simple demo website with Angular2, time flies, Angular has release v8 in 2019 at the time of writing. Perhaps it’d be useful to someone by recreating the demo with Angular 8 & RxJS6.

tl;dr

https://github.com/bennyng/angular-x-demo-reddit-feed

Features Highlight

Environment config support
Modularized codes
Syntax changes

As a note, it’s possible to configure more environments in angular.json. Learn more in https://angular.io/guide/build

Modularized codes

Angular advocates modularized codes. NgModule provides a well defined module signature which facilitates code reusability.

Consider below simple example, the @NgModule decorator describes how RedditFeedModule is configured internally.

src/app/components/reddit-feed.module.ts

declarations — declares sharable components/directives within RedditFeedModule

imports — made external components/directives from other modules available in RedditFeedModule

exports —exposes components/directives externally

Learn more about NgModule from https://angular.io/guide/ngmodules & https://stackoverflow.com/questions/39062930/what-is-the-difference-between-declarations-providers-and-import-in-ngmodule

Syntax changes

Unlike upgrading from Angular 1 (AngularJS) to Angular 2, there had been no dramatic syntax changes since Angular 2 until Angular 8. Each major version upgrade will try to minimize breaking changes.

Historical note —you consider AngularJS and Angular 2 are two totally different frameworks, keeping the name Angular is more like a marketing decision when the team revamp the framework into Angular 2.

See the subtle syntax differences in *ngFor bewteen Angular 2 and Angular 8.

// Angular 2
<div class='reddit' *ngFor="#reddit of _reddits$ | async">
  <h5 class='title'>{{reddit.title}}</h5>
  <img src={{reddit.imageUrl}}/>
</div>

// Angular 8
<div class='reddit' *ngFor="let reddit of reddits$ | async">
  <h5 class='title'>{{reddit.title}}</h5>
  <img src={{reddit.imageUrl}}/>
</div>

Reddit Feed Implementation

Setup Http client
Setup reddit data stream with RxJS observable
Display data with Angular template

Setup Http client

By importing HttpClientModule in the RedditFeedModule, the HttpClient is made available in every components within the module, thanks to dependency injection.

// src/app/components/reddit-feed.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { RedditFeedComponent } from './reddit-feed.component';
export class RedditFeedModule { }

...

// src/app/components/reddit-feed.component.ts

import { HttpClient } from '@angular/common/http';
@Component({
  selector: 'app-reddit-feed',
  templateUrl: './reddit-feed.component.html',
  styleUrls: ['./reddit-feed.component.scss']
})
export class RedditFeedComponent implements OnInit, OnDestroy {
  constructor(private httpClient: HttpClient) {}
}

Setup reddit data stream with RxJS observable

STEP 1 : Read the configured reddit data URL from environment:

STEP 2 : Create observable with HTTP-GET and transform the data into the shape we are interested ({id, title, imageUrl}).

Open up https://www.reddit.com/r/9gag.json in Chrome with this extension installed will let you see the reddit data response in good format.

Display data with Angular template

async is a built-in pipe since Angular 2, behind the scene it subscribes the observable when the view is created. Worth mentioning it will unsubscribe when view is being destroyed, so we don’t have to worry about memory leak.

// src/app/components/reddit-feed.component.ts

public reddits$: Observable<Array<ImageReddit>>;

NOTE — the $ sign in variable reddits$ is a naming convention for observable data type.

Result in mobile view:

Next Chapter

Topics that maybe covered in next chapter:

Improve cosmetics with Angular Material
Deployment with Docker

Full source codes