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

A component grows and goes through multiple phases throughout its life. Using and controlling these phases using lifecycle hooks helps you get a better hold of your application. 

The component gets created, renders, renders its children, makes changes and gets destroyed. And this lifecycle is split into multiple phases that are linked to the component or the children of the component.


## `Constructor`
A `constructor` is invoked when Angular creates a component using the `new` keyword in the class.

## `ngOnInit`
This is invoked when the component initializes and gets the data.

## `ngOnchanges`
 This is invoked whenever there is any change in the `@Input` property.

## `ngDoCheck`
This is invoked when the change detector of the given component is invoked.

## `ngOnDestroy`
This is invoked when the component is destroyed by Angular.

Some of the hooks for the child components are:

- `ngAfterContentInit`
- `ngAfterContentChecked`
- `ngAfterViewInit`
- `ngAfterViewChecked`

## `ngAfterContentInit` 
This is invoked after Angular performs content projection into the component's view. This is done using `ng-content` and `ContentChild`. We have discussed this in the previous lesson.

## `ngAfterContentChecked `
This is invoked each time the content of the given component has been checked by the change detector.

## `ngAfterViewInit` 
This is invoked when the component’s view has been fully initialized.

## `ngAfterViewChecked`
This is invoked each time the view of the given component has been checked by the change detector.


You can call these lifecycle hooks as functions inside our component to perform an action at some phase of the components’ lifecycle.  For example, if we want to make an AJAX request to the server on the initialization of the view, we would do that inside the `ngOnInit` method to make sure that the data is retrieved once the component renders.

Similarly, we can use `ngOnChanges` if we want to perform an action on the change in any of the Input bound properties.

Every time we make use of a lifecycle hook in a component, the class needs to implement that interface of the particular lifecycle hook. In the example below, we look at the lifecycle hooks implementation.

```
class MyLifeCycleComponent implements OnChanges, OnInit, DoCheck, AfterContentInit,
AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestroy {

    constructor() {
      }

    ngOnInit() {
        console.log(data);
      }

    ngDoCheck() {
        console.log("change detector");
    }

    ngAfterContentInit() {
        console.log("content projection");
    }

    ngAfterContentChecked() {
        console.log("each time checked");
    }

    ngAfterViewInit() {
        console.log("view fully initialized");
    }

    ngAfterViewChecked() {
        console.log("each time view change");
    }

    ngOnDestroy() {
        console.log("component destroyed");
    }
}
```
Observe when each of these life cycle hooks gets invoked, it creates use cases like using `Input()` or `ViewChild()`.



# `Constructor`
A `constructor` is invoked when Angular creates a component using the `new` keyword in the class.

# `ngOnInit`
This is invoked when the component initializes and gets the data.

# `ngOnchanges`
 This is invoked whenever there is any change in the `@Input` property.

# `ngDoCheck`
This is invoked when the change detector of the given component is invoked.

# `ngOnDestroy`
This is invoked when the component is destroyed by Angular.

Some of the hooks for the child components are:

- `ngAfterContentInit`
- `ngAfterContentChecked`
- `ngAfterViewInit`
- `ngAfterViewChecked`

# `ngAfterContentInit` 
This is invoked after Angular performs content projection into the component's view. This is done using `ng-content` and `ContentChild`. We have discussed this in the previous lesson.

# `ngAfterContentChecked `
This is invoked each time the content of the given component has been checked by the change detector.

# `ngAfterViewInit` 
This is invoked when the component’s view has been fully initialized.

# `ngAfterViewChecked`
This is invoked each time the view of the given component has been checked by the change detector.


You can call these lifecycle hooks as functions inside our component to perform an action at some phase of the components’ lifecycle.  For example, if we want to make an AJAX request to the server on the initialization of the view, we would do that inside the `ngOnInit` method to make sure that the data is retrieved once the component renders.

Similarly, we can use `ngOnChanges` if we want to perform an action on the change in any of the Input bound properties.

Every time we make use of a lifecycle hook in a component, the class needs to implement that interface of the particular lifecycle hook. In the example below, we look at the lifecycle hooks implementation.

```
class MyLifeCycleComponent implements OnChanges, OnInit, DoCheck, AfterContentInit,
AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestroy {

    constructor() {
      }

    ngOnInit() {
        console.log(data);
      }

    ngDoCheck() {
        console.log("change detector");
    }

    ngAfterContentInit() {
        console.log("content projection");
    }

    ngAfterContentChecked() {
        console.log("each time checked");
    }

    ngAfterViewInit() {
        console.log("view fully initialized");
    }

    ngAfterViewChecked() {
        console.log("each time view change");
    }

    ngOnDestroy() {
        console.log("component destroyed");
    }
}
```
Observe when each of these life cycle hooks gets invoked, it creates use cases like using `Input()` or `ViewChild()`.


In this lesson, we will look at the different life cycle hooks available to a component and the function of those hooks at each stage.

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

Component Lifecycle Hooks

`Constructor`

`ngOnInit`

`ngOnchanges`