Build an Angular 2 Instant Search Component

11 minutes

In this course you will learn more about using observables in Angular 2. We are going to explore the new HTTP service, and how we can leverage the power of observables and RxJS to build a rock solid instant search component with a handful of operators.

You will learn operators like map, distinctUntilChanged, debounceTime, merge, flatMap, and switchMap by applying them to a real-world component. By the end of this course you will have a clear understanding of how components can be designed around the concept of event streams which are wired together like modular building blocks.

All of this in about 11 minutes! 😄

This Angular 2 course assumes a solid understanding of the fundamentals.
We have Intermediary Angular 2 courses including topics on Dependency Injection, Components, Directives, Forms, Router, and Animating Web Apps

pro-course-rss-logo

PRO RSS Feed

Consuming events as Observables in Angular 2

Debounce the user input in Angular 2 using debounceTime

P

Prevent unnecessary requests in Angular 2 with distinctUntilChanged

P

Combine Observables in Angular 2 with flatMap

P

Deal with out of order responses in Angular 2 using switchMap

P

Build fully reactive APIs in Angular 2 with Observables

P
angular2 tutorial about Consuming events as Observables in Angular 2

Consuming events as Observables in Angular 2

3:07 angular2

In this video series we’ll take a look at Observables in Angular 2. We’ll figure out how they integrate with the http layer and how we can leverage their power to build a rock solid instant search with just a bunch of operators.

This first video walks you through the process of refactoring an existing solution to consume events from the template as Observables.

angular2 tutorial about Debounce the user input in Angular 2 using debounceTime

Debounce the user input in Angular 2 using debounceTime

1:25 angular2 PRO

In this video we'll learn how to use the debounceTime operator to tame the user input for an instant search.

angular2 tutorial about Prevent unnecessary requests in Angular 2 with distinctUntilChanged

Prevent unnecessary requests in Angular 2 with distinctUntilChanged

1:15 angular2 PRO

In this video you'll learn how to use the distinctUntilChanged operator to prevent making unnecessary requests.

angular2 tutorial about Combine Observables in Angular 2 with flatMap

Combine Observables in Angular 2 with flatMap

2:10 angular2 PRO

In this video you'll learn how to combine multiple Observable streams using the flatMap operator

angular2 tutorial about Deal with out of order responses in Angular 2 using switchMap

Deal with out of order responses in Angular 2 using switchMap

1:34 angular2 PRO

In this video you'll learn how to deal with out of order responses using the powerful switchMap operator

angular2 tutorial about Build fully reactive APIs in Angular 2 with Observables

Build fully reactive APIs in Angular 2 with Observables

1:58 angular2 PRO

In this video you'll learn how Observables can improve the overall API design by designing APIs that accept Observables as arguments

Presented by:

Christoph Burgdorf

Christoph began programming at the age of 10. He is the creator of the Nickel.rs web framework and a contributor of the AngularJS project. Christoph is also part of the Angular 2 Docs Authoring team.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?