Angular onPush Change Detection Strategy User Login Page — Demo

Till now in previous demo session Responsive Products Page | e-Commerce | Angular Material | 2 we have done loading of products with spinner, applied sorting to products name, image and price. Next in this video session Angular onPush Change Detection | Demo | User Login Page we will learn change detection strategy in angular.

To do this we will make changes to our existing shopping cart app where currently we have default change detection strategy. By default it means whenever somebody subscribe to authentication service and during login when some error coming that error we are subscribing and setting in the local property of our component which is nothing but error property.

So whenever error comes during login it outputs this error in html also. This is good, however we want to convert our application reactive. In order to do this the very important change we need to do is not to run our component in a default change detection strategy.

The moment we will make this change detection strategy to On-Push, our component will become reactive. Here reactive means every time when there is next will happen in the property then it will show that property value.

In case we do not have parent-child components and we only have single component and still we want to use On-Push change detection strategy then we need to convert them into behavior Subject.

After applying all this we can validate its working in UI as well.

All this coding is explained in a detailed manner in our video session. This session also helps us to understand how behavior Subject works and how it helps to make our component reactive. In next video session Creating Store Using RxJS | Angular | Demo we will do coding for creating a store using RxJS.

--

--

--

Pluralsight Author, Developer and Trainer. I help students and professionals to become Full Stack Software Developer in less than a Year.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

A domain-driven Vue.js Architecture

The view from an inner courtyard, enclosed by buildings, themed in Vue’s brand colors. In the sky, there thrones the Vue logo

String concatenation operator considered harmful

I am getting cheaper pricing for hosting from other providers. Why is your price high?

Creating a Node Express-Webpack App with Dev and Prod Builds

Dynamic Manifest for PWA in React

How To Generate A Slug In Gatsby.JS

How to Write E2E Tests in Page Object Model (Using Jest and Puppeteer)

Responsive Toolbar — Online ecommerce Store Part 2

Responsive Toolbar - Online ecommerce Store Part 2

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rupesh Kumar Tiwari

Rupesh Kumar Tiwari

Pluralsight Author, Developer and Trainer. I help students and professionals to become Full Stack Software Developer in less than a Year.

More from Medium

Azure AD Authentication Implementation in Angular

OpenId Connect (OIDC) with Angular

Broadcasting Messages with SignalR using Angular & .NET Core API