HomeCoursesReactive Programming with Angular and RxJS 7

4.4

Intermediate

22h

Updated 3 months ago

Reactive Programming with Angular and RxJS 7

Gain insights into reactive programming with RxJS 7, explore data streams, error handling, and multicasting to build a recipe app, and learn to test and optimize reactive applications.

Join 2.7 million developers at

Overview

Content

Reviews

The reactive programming paradigm is designed to make working with asynchronous events and data streams convenient. This course teaches you about the reactive programming paradigm and when to choose it over others. You’ll learn to use new RxJS 7 features to create a recipe book web application that lets users browse and share recipes. In this context, you’ll learn about data streams, error handling, and how to combine streams and transform one data stream into another. You’ll develop an understanding of multicasting and caching streams, how to share data between components, perform bulk operations such as file uploads, and perform real-time updates. Finally, you’ll learn how to test a reactive application. To assess your knowledge, there’s a project, coding challenges, and assessments. After this course, you’ll be able to determine the utility of the reactive paradigm for any application and have mastery over new RxJS 7 features to create robust reactive applications.

The reactive programming paradigm is designed to make working with asynchronous events and data streams convenient. This cours...Show More

WHAT YOU'LL LEARN

Working knowledge of the reactive programming paradigm

The ability to develop applications that work with asynchronous events and data streams

Familiarity with the use of RxJS 7 features for reactive programming

The ability to pick the right RxJS operators to combine multiple streams

Working knowledge of the reactive programming paradigm

Content

75 Lessons12 Quizzes2 Assessments

Getting Started

1 Lessons

Get familiar with adopting a reactive mindset, RxJS 7 features, and strategies in Angular.

Course Overview

The Power of the Reactive Paradigm

6 Lessons

Look at the fundamentals of reactive programming in Angular with a focus on RxJS.

Introduction to the Reactive Paradigm

Pillars of Reactive Programming

Using RxJS in Angular and Its Advantages

The Marble Diagram—Our Secret Weapon

Summary

Quiz: The Power of the Reactive Paradigm

RxJS 7—The Major Features

6 Lessons

Examine key enhancements in RxJS 7, focusing on performance, type safety, and API consistency.

About This Chapter

Bundle Size and Typing Improvements

Understanding the toPromise() Deprecation

Highlighting API Consistency Improvements

Summary

Quiz: RxJS 7—The Major Features

A Walk-Through of the Application

3 Lessons

Apply your skills to navigate and implement a recipe-sharing app with Angular and RESTful Node.js.

About Our Application

Architecture and Component Overview

Summary

Fetching Data as Streams

7 Lessons

Explore reactive data management patterns in Angular using RxJS for efficiency and clarity.

Introduction to Fetching Data

Classic Pattern for Fetching Data

Classic Pattern for Managing Unsubscriptions

Reactive Pattern for Fetching Data

Advantages of the Reactive Pattern

Summary

Quiz: Fetching Data as Streams

Error Handling

6 Lessons

Implement effective RxJS error handling with strategies like catchError, delayWhen, retry, and retryWhen.

Anatomy of Observables and Error-Handling Patterns

Error-Handling Patterns: Replace Strategy

Error-Handling Patterns: Rethrow and Retry Strategies

Error Handling in Action

Summary

Quiz: Error Handling

Build a Weather App Using Angular and RxJS

Project

Premium

Combining Streams

5 Lessons

Master the steps to filter data using RxJS patterns, optimizing reactive flows in Angular.

Introduction to Combining Streams

The Imperative Pattern for Filtering Data

The Declarative Pattern for Filtering Data

Summary

Quiz: Combining Streams

Assessment 1

Assessment

Transforming Streams

8 Lessons

Step through transforming streams, implementing autosave features, and creating effective filtering options.

Introduction to Transforming Streams

The Imperative Pattern for Autosave

The Declarative Pattern for Autosave

Useful Higher-Order Mapping Operators

Summary

Quiz: Transforming Streams

Coding Challenge: Implement a Filter

Challenge Solution: Implement a Filter

Multicasting Essentials

4 Lessons

Grasp the fundamentals of multicasting in RxJS, including hot/cold observables and Subjects.

Multicasting vs. Unicasting

Subjects and Multicasting Operators

Summary

Quiz: Multicasting Essentials

10.

Caching Streams

8 Lessons

Break apart caching strategies in web apps to enhance performance and minimize network requests.

Introduction to Caching Streams

Using the Reactive Pattern to Cache Streams

Recommended Pattern to Cache Streams

Use Cases of Caching Streams

Summary

Quiz: Caching Streams

Coding Challenge: Formatting Data

Challenge Solution: Formatting Data

11.

Sharing Data between Components

4 Lessons

Grasp the fundamentals of sharing data in Angular using reactive patterns and services.

Introduction to Sharing Data between Components

Reactive Patterns and Other Ways to Share Data

Summary

Quiz: Sharing Data between Components

12.

Bulk Operations

5 Lessons

Map out the steps for implementing reactive bulk operations and progress tracking with RxJS.

Introduction to Bulk Operations

Reactive Pattern for Bulk Operations

Reactive Pattern for Tracking Progress

Summary

Quiz: Bulk Operations

13.

Processing Real-Time Updates

6 Lessons

See how it works to implement real-time updates using WebSocket communication in Angular.

Introduction to Processing Real-Time Updates

Reactive Pattern for Consuming Real-Time Messages

Reactive Real-Time Message Consumption Example

Reactive Pattern for Handling Reconnection

Summary

Quiz: Processing Real-Time Updates

14.

Testing RxJS Observables

5 Lessons

Build on methods for testing RxJS observables, including subscribe/assert, marble-testing, and HTTP streams.

Subscribe and Assert Pattern

Marble-Testing Pattern

Testing Streams Using the HTTPClient Module

Summary

Quiz: Testing RxJS Observables

Assessment 2

Assessment

15.

Conclusion

1 Lessons

Get familiar with Angular's reactive programming patterns, data management, and real-time updates.

Wrap Up

Certificate of Completion

Showcase your accomplishment by sharing your certificate of completion.

Course Author:

Packt

Developed by MAANG Engineers

Every Educative lesson is designed by our in-house team of ex-MAANG software engineers and PhD computer science educators, and developed in consultation with developers and data scientists working at Meta, Google, and more. Our mission is to get you hands-on with the necessary skills to stay ahead in a constantly changing industry. No video, no fluff. Just interactive, project-based learning with personalized feedback that adapts to your goals and experience.

Trusted by 2.7 million developers working at companies

"These are high-quality courses. Trust me. I own around 10 and the price is worth it for the content quality. EducativeInc came at the right time in my career. I'm understanding topics better than with any book or online video tutorial I've done. Truly made for developers. Thanks"

Anthony Walker

@_webarchitect_

"Just finished my first full #ML course: Machine learning for Software Engineers from Educative, Inc. ... Highly recommend!"

Evan Dunbar

ML Engineer

"You guys are the gold standard of crash-courses... Narrow enough that it doesn't need years of study or a full blown book to get the gist, but broad enough that an afternoon of Googling doesn't cut it."

Software Developer

Carlos Matias La Borde

"I spend my days and nights on Educative. It is indispensable. It is such a unique and reader-friendly site"

Souvik Kundu

Front-end Developer

"Your courses are simply awesome, the depth they go into and the breadth of coverage is so good that I don't have to refer to 10 different websites looking for interview topics and content."

Vinay Krishnaiah

Software Developer

Hands-on Learning Powered by AI

See how Educative uses AI to make your learning more immersive than ever before.

Personalized Interview Prep

Skip the LeetCode grind with a custom roadmap that adapts to your goals. Hands-on practice for Coding Interviews, System Design, and more.

Mock Interviews

Test your skills in a simulated interview setting. Receive personalized feedback based on your performance. Available for Coding Interviews, System Design, and more.

AI Prompt

Build prompt engineering skills. Practice implementing AI-informed solutions.

Code Feedback

Evaluate and debug your code with the click of a button. Get real-time feedback on test cases, including time and space complexity of your solutions.

Explain with AI

Select any text within any Educative course, and get an instant explanation — without ever leaving your browser.

AI Code Mentor

AI Code Mentor helps you quickly identify errors in your code, learn from your mistakes, and nudge you in the right direction — just like a 1:1 tutor!

Course

Mastering State Management with Angular and NgRx

Gain insights into state management in Angular with NgRx. Learn to use store, actions, reducers, selectors, handle side effects, and write unit tests for scalable applications.

15 h

beginner

Course

Animations in Angular

Gain insights into creating beautiful, performant animations in Angular. Delve into CSS transitions, Web Animations API, and Angular animations, while exploring performance and debugging techniques.

20 h

intermediate

Course

Developing Mobile Apps with Ionic and Angular

Gain insights into developing hybrid mobile apps with Ionic and Angular. Discover platform-specific UI elements, and build a functional attendance app for your portfolio and deployment.

10 h

beginner

Course

A Hands-on Guide to Angular

Discover Angular's core concepts and advance to building a complete SPA. Gain hands-on experience by creating modules, components, forms, routing, and APIs in an e-commerce app.

16 h

intermediate

Course

Learn Front-End Development and Automated Testing with Angular

Gain insights into modern web development and automated testing. Delve into test-driven development, unit, integration, and end-to-end testing while building a practical app for your portfolio.

450 h 40 m

beginner

Course

Directives and Pipes in Angular

Gain insights into Angular’s built-in directives and pipes, and delve into creating custom ones. Learn about their real-world applications to boost your project's performance and code readability.

3 h 10 m

intermediate

Course

Mastering State Management with Angular and NgRx

beginner

15 hour

Course

Animations in Angular

intermediate

20 hour

Course

Developing Mobile Apps with Ionic and Angular