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'll cover the following...
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
...