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.

angular_setup.tar.gz

angular

In this course, you will cover the most fundamental concepts of Angular, a popular JavaScript framework. You will learn everything about building a complete Angular app, setting up the development environment, and building your own single-page application (SPA).

You’ll start off by covering the basic building blocks of Angular such as modules, components, and directives. After that, the course will introduce you to some more advanced material that focuses on forms, routing, and dealing with APIs. 

By the end of this course, you will have gained hands-on experience by building a fully functional e-commerce application.

A Hands-on Guide to Angular

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 src="../../assets/cart.png"> 
<span>{{counter}}</span></div>
<router-outlet></router-outlet>
```

So, the flag `fadedFullScreenLoaderFlag` is to be noticed here.

This has to be set based on a **Boolean value** that we get by subscribing to the observable that has the responsibility to inform the app component about the data received.

Let us take the example of our product-list component. Our goal here is to show the loader upon initialization of the component. Once the data is retrieved in the success handler of the API call, we can set the show loader to be `false`.

```
ngOnInit(): void {
    this._fadedLoadedService.setLoadingScreenState(true);
    this.id = +this._activateService.snapshot.paramMap.get('id');
    this._getProduct();
  }

// Set it false on api success
private _getProduct() {
    this._productService.getProduct(this.id)
    .subscribe(data => {
      this.productData = data;
      console.log(data);
  this._fadedLoadedService.setLoadingScreenState(false);
      })
  }
```

We are setting a state to be true or false whenever the component loads/gets the data. But what is this state? What is the faded loaded service?

So to perform the emitting of data, let’s create a faded loaded service.


### Create a loader service

```
import { Injectable } from '@angular/core';
import { Subject, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class FadedFullScreenLoaderService {
  private _fadedScreenLoaderSubject = new Subject<boolean>();
  public fadedScreenLoaderObservable$: Observable<boolean>;
  constructor() {
    this.fadedScreenLoaderObservable$ = this._fadedScreenLoaderSubject.asObservable();
  }
  public setLoadingScreenState(state: boolean) {
    this._fadedScreenLoaderSubject.next(state);
  }
}
```

Just as we did with the counter, here we set a Boolean value for the observable and send it to whichever component subscribes to this observable.

This observable can now be subscribed to, in the `app.component.ts`.

```
private _subscribeTofadedObservable = (state: boolean) => {
   this.fadedFullScreenLoaderFlag = state;
}
```

### A confusing error


You might end up getting an error like this:
```
'Expression changed after it has been checked'
```
To resolve this, we can simply set some timeout to avoid the value change detection issue happening here.

```
private _subscribeTofadedOnservable = (state: boolean) => {
    this._timeouts = setTimeout(() => {
    this.fadedFullScreenLoaderFlag = state;
    }, 10);
}
```

Finally, the flag gets the state of the loader and displays it accordingly.

Check the demo in the end for the **`FadedObservable Service`**



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 src="../../assets/cart.png"> 
<span>{{counter}}</span></div>
<router-outlet></router-outlet>
```

So, the flag `fadedFullScreenLoaderFlag` is to be noticed here.

This has to be set based on a **Boolean value** that we get by subscribing to the observable that has the responsibility to inform the app component about the data received.

Let us take the example of our product-list component. Our goal here is to show the loader upon initialization of the component. Once the data is retrieved in the success handler of the API call, we can set the show loader to be `false`.

```
ngOnInit(): void {
    this._fadedLoadedService.setLoadingScreenState(true);
    this.id = +this._activateService.snapshot.paramMap.get('id');
    this._getProduct();
  }

// Set it false on api success
private _getProduct() {
    this._productService.getProduct(this.id)
    .subscribe(data => {
      this.productData = data;
      console.log(data);
  this._fadedLoadedService.setLoadingScreenState(false);
      })
  }
```

We are setting a state to be true or false whenever the component loads/gets the data. But what is this state? What is the faded loaded service?

So to perform the emitting of data, let’s create a faded loaded service.


# Create a loader service

```
import { Injectable } from '@angular/core';
import { Subject, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class FadedFullScreenLoaderService {
  private _fadedScreenLoaderSubject = new Subject<boolean>();
  public fadedScreenLoaderObservable$: Observable<boolean>;
  constructor() {
    this.fadedScreenLoaderObservable$ = this._fadedScreenLoaderSubject.asObservable();
  }
  public setLoadingScreenState(state: boolean) {
    this._fadedScreenLoaderSubject.next(state);
  }
}
```

Just as we did with the counter, here we set a Boolean value for the observable and send it to whichever component subscribes to this observable.

This observable can now be subscribed to, in the `app.component.ts`.

```
private _subscribeTofadedObservable = (state: boolean) => {
   this.fadedFullScreenLoaderFlag = state;
}
```

# A confusing error


You might end up getting an error like this:
```
'Expression changed after it has been checked'
```
To resolve this, we can simply set some timeout to avoid the value change detection issue happening here.

```
private _subscribeTofadedOnservable = (state: boolean) => {
    this._timeouts = setTimeout(() => {
    this.fadedFullScreenLoaderFlag = state;
    }, 10);
}
```

Finally, the flag gets the state of the loader and displays it accordingly.

Check the demo in the end for the **`FadedObservable Service`**



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

# Creating a loader component


Inside `loader.component.html`,
```
<div>
      <div></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 src="../../assets/cart.png"> 
<span>{{counter}}</span></div>
<router-outlet></router-outlet>
```

So, the flag `fadedFullScreenLoaderFlag` is to be noticed here.

This has to be set based on a **Boolean value** that we get by subscribing to the observable that has the responsibility to inform the app component about the data received.

Let us take the example of our product-list component. Our goal here is to show the loader upon initialization of the component. Once the data is retrieved in the success handler of the API call, we can set the show loader to be `false`.

```
ngOnInit(): void {
    this._fadedLoadedService.setLoadingScreenState(true);
    this.id = +this._activateService.snapshot.paramMap.get('id');
    this._getProduct();
  }

// Set it false on api success
private _getProduct() {
    this._productService.getProduct(this.id)
    .subscribe(data => {
      this.productData = data;
      console.log(data);
  this._fadedLoadedService.setLoadingScreenState(false);
      })
  }
```

We are setting a state to be true or false whenever the component loads/gets the data. But what is this state? What is the faded loaded service?

So to perform the emitting of data, let’s create a faded loaded service.


# Create a loader service

```
import { Injectable } from '@angular/core';
import { Subject, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class FadedFullScreenLoaderService {
  private _fadedScreenLoaderSubject = new Subject<boolean>();
  public fadedScreenLoaderObservable$: Observable<boolean>;
  constructor() {
    this.fadedScreenLoaderObservable$ = this._fadedScreenLoaderSubject.asObservable();
  }
  public setLoadingScreenState(state: boolean) {
    this._fadedScreenLoaderSubject.next(state);
  }
}
```

Just as we did with the counter, here we set a Boolean value for the observable and send it to whichever component subscribes to this observable.

This observable can now be subscribed to, in the `app.component.ts`.

```
private _subscribeTofadedObservable = (state: boolean) => {
   this.fadedFullScreenLoaderFlag = state;
}
```

# A confusing error


You might end up getting an error like this:
```
'Expression changed after it has been checked'
```
To resolve this, we can simply set some timeout to avoid the value change detection issue happening here.

```
private _subscribeTofadedOnservable = (state: boolean) => {
    this._timeouts = setTimeout(() => {
    this.fadedFullScreenLoaderFlag = state;
    }, 10);
}
```

Finally, the flag gets the state of the loader and displays it accordingly.

Check the demo in the end for the **`FadedObservable Service`**



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


Course Overview

Introduction to the Framework

Building Blocks of Angular

Basic Concepts in an Angular Application

Forms in Angular

Routing in Angular

Services and Dependency Injection

Dealing with APIs

Implement the Above in a E-commerce App

Login and Authentication

Summary and Resources

Managing the State of the Application

Creating a loader component