...

/

Managing the State of the Application

Managing the State of the Application

In this lesson, we will complete the following in our application: - Adding a loader component - Creating our cart - Completing the order

We saw how to communicate between components that have a nested or routing-based relationship. We performed the concept of Subject/observables to send the data throughout the application.

The problem that we faced was that our huge data tasks time to load. So we want to show the user a loader until the data is retrieved.

Let’s see how to do that, we will use the same idea that we followed before. We want to create a subject and observable that maintain the value of a Boolean variable that decides whether the loader should show or not.

A visual idea of what we are trying to do is:

First, let’s create a loader component with the template and style of a loader.

Creating a loader component

Inside loader.component.html,

<div class="faded-loading-screen">
      <div class="spinner"></div>
</div>

We want this to appear on the app level view if some data is being retrieved.

<section *ngIf="fadedFullScreenLoaderFlag">
    <app-spinner></app-spinner>
</section>

<div (click)="checkout()"><img
...