Home>Courses>Reactive Programming with Angular and RxJS 7

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.

Intermediate

75 Lessons

22h

Certificate of Completion

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.

AI-POWERED

Explanations

AI-POWERED

Explanations

This course includes

2 Assessments

37 Playgrounds

12 Quizzes

Course Overview

What You'll Learn

Course Content

Recommendations

Course Overview

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 m...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

Course Content

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

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

10.

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

11.

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

12.

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

13.

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

14.

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

15.

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

17.

Conclusion

1 Lessons

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

Wrap Up

Course Author

Packt

Trusted by 2.5 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."

Carlos Matias La Borde

Software Developer

"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

"I've tried probably 5-7 different sites and Educative is easily the best. It perfectly blends explanation with interactivity"

Eric Downs

Musician/Entrepeneur

Hands-on Learning Powered by AI

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

Instant 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.

AI-Powered Mock Interviews

Put your skills to the test in a simulated interview setting. Receive personalized feedback based on your performance. Available in Premium & Premium Plus plans.

Adaptive Learning

At various checkpoints throughout Educative courses, you will be prompted to take a quick assessment. Receive a condensed curriculum tailored to your strengths and skill gaps.

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!

Recommended before starting this course

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.

intermediate

16 hours

Course

Learn Front-End Development and Automated Testing with Angular

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

beginner

450 hours 40 mins

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.

intermediate

3 hours 10 mins

Course

A Hands-on Guide to Angular

intermediate

16 hour

Course

Learn Front-End Development and Automated Testing with Angular

beginner

450 hour 40 min

Course

Directives and Pipes in Angular

intermediate

3 hour 10 min

Related Courses and Skill Paths

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.

beginner

15 hours

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.

intermediate

20 hours

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.

beginner

10 hours

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