Observing Reddit with Angular 2

Observing Reddit with Angular 2
mars 6, 2016 Mathias Forssen

While a large portion of JFokus was aimed towards Java development, some JavaScript did find it’s way there. One of those JavaScript lectures that I went to was given by Gerard Sans and the topic was asynchronous data streams Angular 2, which at the time had just entered beta.

Rather than providing you with a recount of what Gerard said I figured that I could provide you with a slightly more hands on demonstration of asynchronous streams in Angular 2 by looking at a small application that searches /r/pics for a given phrase. The application is a slightly rewritten version of what can be found here https://www.youtube.com/watch?v=JPuqluYYa-o, with some changes made in order for it to work with the current version of the beta.

The application is, besides some boilerplate code, basically split into two files, a template and the associated typescript file.

app/template.html


<form [ngFormModel]='searchForm'>
Search for:
<input type="text" ngControl="searchField">
</form>

<div>
<div class="image" *ngFor="#r of results | async">
<small> {{r.title}} </small>
<img *ngIf="r.url" [src]="r.url">
</div>
</div>

When diving into the template file, the most apparent change for those familiar with Angular is probably going to be the change to camelcase when using angular statements. However, what we want to be looking at here is the async pipe, a new feature in Angular 2. The async pipe takes an Observable (Angular 2 uses RxJS) as an input and as that Observable changes it returns its current value. In this case the pipe takes a search field as input, which is defined in the typescript file.

app/app.components.ts


export class AppComponent {
searchForm: ControlGroup;
results: Observable<any[]>;

constructor(private http: Http) {
let searchField = new Control();
this.searchForm = new ControlGroup({searchField});

this.results = searchField.valueChanges
.debounceTime(500)
.switchMap((val:string) => {
return this.searchRedditPics(val);
});
}

The search field automatically gets an Observable called valueChanges, which we can make use of. As we are making use of RxJS we get some functions we can use together with our Observable, switchmap being one of them. A nice feature of switchMap is that it can cancel an ongoing request if it receives a new one while still processing the first, thus saving some system resources. We are also making use of a function called debounceTime, which in this context basically delays requests being made for the given amount of time.

That is basically all it takes to write an application in Angular 2 that asynchronously searches for images on /r/pics. The code I didn’t cover in the typescript file is basically just code that translates the result from the request sent to the Reddit API.

 

If you’re interested in looking through all of the code, the project can be found here: https://github.com/forssenm/async-Angular2

The Angular 2 homepage can be found here: https://angular.io/

0 Kommentarer

Lämna ett svar

E-postadressen publiceras inte. Obligatoriska fält är märkta *

*

Denna webbplats använder Akismet för att minska skräppost. Lär dig hur din kommentardata bearbetas.