0% completed

All LessonsFree Lessons (10)

Course Introduction

Who Should Take This Course and Why?

Creating Observables

Learning Observables Introducing Rx Concepts Building a Stopwatch Running a Timer Importing Timer From RxJS Piping Data Through Operators Manipulating Data in Flight with map Handling User Input Assembling the Stopwatch Drag and Drop Interesting Applications in Next Chapters Using a Subscription Experimenting with Observables What we Learned Quiz: Creating Observables

Manipulating Streams

Introduction: Manipulating Streams Translating Pig Latin with Flatten and Reduce Flattening Reducing Debugging an Observable Stream Typeahead What We Learned Quiz: Manipulating Streams

Managing Asynchronous Events

Dragon of Asynchronicity

Making AJAX Requests

Handling Errors

Promise vs. Observables with AJAX

Loading with Progress Bar

When Good AJAX Goes Bad

Progressive and Ordered Loading

What We Learned

Quiz: Managing Asynchronous Events

Advanced Async

Advanced Asynchronous Events The Spec Preventing Race Conditions with switchMap Debouncing Events Throttling Events Adding Debounce to the Typeahead Skipping Irrelevant Requests Adding Error Handling in Typeahead Typeahead Application Using Debounced Function Building a Stock Ticker Live Filtering the Stream Stock Ticker Application What We've learned Quiz: Advanced Async

Multiplexing Observables

The Problem with Cold Observables Subscriptions Multicasting with the Subject Class Building a Chat Room Rendering and Switching Rooms Sending Messages in the Chatroom Displaying Unread Notifications What we Learned Quiz: Multiplexing Observables

Using HTTP in Angular

Project Introduction Generating a New Project Generating Components and Building a Search Box AJAX Requests and Importing Modules in Angular Applications Angular Services Displaying Returned Data BehaviourSubject and Async Pipe in Angular Saving New Data Routing to Components Linking Between Components Editing a Single Photo Adding in Analytics Intercepting HTTP Calls What We learned Quiz: Using HTTP in Angular

Building Reactive Forms in Angular

Reactive Forms Phone Number Input Box Building a Phone Number Input the Right Way Creating a Phone Input with Angular Validating an Input Building a Pizzeria Registration Form Using Advanced Validation Validating Address and Credit Card Connecting the Model to the View Setting Up the Registration Form Inputs Updating Form Groups Submitting the Form Handling Multiple Addresses Creating a Pizza Ordering Form Creating the Pizza View Fetching Component Data in the Route using Reactive Selectors Reacting to Change Adding Specialty Pizzas using patchValue What we learned Quiz: Building Reactive Forms in Angular

Advanced Angular

Building Performant Applications Understanding Angular Performance Zones and Change Detection Profiling Change Detection Optimizing Change Detection Managing State with NgRx Actions Reducers Plugging It All Together Listening in to Changes to the State Sending Data to Store What We Learned Quiz: Advanced Angular

Project

Deploy a Web Application Using Ansible

Reactive Game Development

Game Development Creating Your Own Operator Animating Objects Calling next with Schedulers Requesting Repaints with requestAnimationFrame Creating Easing Operators Architecting a Game The RxJS Backbone Managing Game State Tracking User Input Building a Complex Operator Creating Enemies Detecting Collisions What we Learned Bonus Points

Build Reactive Websites with RxJS: Master Observables and Wrangle/

...

/

The Two Merges

The Two Merges

Let's see how we can use merge as a constructor as well as an operator.

We'll cover the following...

The two merges

In the below example, merge is used as a constructor (a way to create a new observable).

In cases where everything starts at the same time (like the loading bar), merge used as a constructor is simpler than the operator form.

TypeScript 3.3.4

merge(...requests)
.subscribe(
    val => drawToPage(val),
    err => alert(err)
);

However, it’s also an operator:

TypeScript 3.3.4

let obsOne$ = interval(1000);
let obsTwo$ = interval(1500);
// Piping through the merge operator
obsOne$
.pipe(
  merge(obsTwo$)
)
.subscribe(console.log);
// Is the same as using the merge constructor
merge(obsOne$, obsTwo$)
.subscribe(console.log);

`merge` as “operator”

The operator form of merge comes in handy when you’re in the middle of an observable chain and want to add in more data. ...