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

You might have used `*ngIf`, `*ngFor` by now in your Angular applications. These are the built-in directives that are provided to us by the Angular team. We'll see how to create our very own directives in Angular. Before we create one, we need to understand the different types of custom directives.

We have discussed the following in the directives section before.


- Component directives
- Structural directives
- Attribute directives

Follow the steps below to create our own custom attribute directives in Angular.


## Step 1. [Creating a directive](https://www.educative.io/courses/a-hands-on-guide-to-angular/directives) by decorating a class with the `@Directive` decorator.

OR use the CLI to create a directive in your application.

```
ng generate directive <directive-name>
```
The directive would look something like this:

```
import { Directive, ElementRef, Renderer } from "@angular/core";	
@Directive({
	selector: '[app-ch-color]'	
})
export class bgDirective{
}
```

## Step 2. Injecting Services `ElementRef` and `Renderer`
After the class is ready, the next step is to take the instance of this and be able to use it on a component.

So, inside the constructor of the component, use:

```
constructor(private el: ElementRef, private renderer: Renderer){}
```

This instance of `Renderer` service can now be used to apply behavioral changes to the custom directive.

## Step 3. Registering your directive in the module

One important step is to let the module know about your custom directive, so next thing is to go to the relevant module, it be the root module `app.module.ts` or any feature module you might have in your application.

So inside the declarations array of your module, define your custom directive, for example, as follows:

```
import MyEducativeCustomDirective from '../my-custom-dir/my-custom-dir.ts'

export class AppModule{
   declarations: [
     MyEducativeCustomDirective,
   ]
}
```

## Step 4. Using your directive

```
import { Directive, ElementRef, Renderer } from "@angular/core";	
@Directive({
	selector: '[app-ch-color]'	
})	
export class bgDirective{
	constructor(private el: ElementRef, private renderer: Renderer){
	this.changeColor('red');
}	    
changeColor(color: string) {	        
  this.renderer.setElementStyle(this.el.nativeElement, 'color', color); 	    
}	
}
```


To dive deep into the usage of Custom Attribute Directives, we need to understand some terminology. 
When a custom Directive is applied to an HTML element, that element is called the **HOST ELEMENT**. So, in the above scenario, the custom directive is `[app-ch-color]`, and the HOST ELEMENT will be the `div` on which you apply `[app-ch-color]`.

```
<div app-ch-color>
	  Hello world!!!	
</div>	
<div>	  
      Hello from Educative!!! (No Custom Attribute)	
</div>
```

To capture the event of your host element, you need to use `@HostListener()`.

```
  import { Directive, ElementRef, Renderer, HostListener } from "@angular/core";	
@Directive({
  selector: '[app-ch-color]'	
})	
export class bgDirective{
 constructor(private el: ElementRef, private renderer: Renderer){	        
     this.changeColor('red');	    
}	    
@HostListener('click') foo(){	        
    alert('Host Element is clicked');	        
    this.changeColor('green');	    
}	    
changeColor(color: string){	        
 this.renderer.setElementStyle(this.el.nativeElement, 'color', color);  	   
  }	
}
```

So, to capture the event `foo()` for the host element `div`, we use `@HostListener()` that alerts that the host element is clicked. Similarly, to capture a property of the host element, we use `@HostBinding()`.

```
import { Directive, ElementRef, Renderer, HostListener } from "@angular/core";	
  @Directive({
     selector: '[app-ch-color]'
  })	
export class bgDirective{	    
  constructor(private el: ElementRef, private renderer: Renderer) {	        
      this.changeColor('red');	    
  }	    
@HostBinding('style.border') border : string;	    
@HostListener('click') koo(){	      
    this.border = '5px solid yellow';	    
}	    
changeColor(color: string){	        
   this.renderer.setElementStyle(this.el.nativeElement, 'color', color);  	    
  }	
}
```

This is a very basic example of understanding what Custom Directives are. We can solve much more complex requirements using Custom Directives in Angular.

Expected output from the demo below:

You might have used `*ngIf`, `*ngFor` by now in your Angular applications. These are the built-in directives that are provided to us by the Angular team. We'll see how to create our very own directives in Angular. Before we create one, we need to understand the different types of custom directives.

We have discussed the following in the directives section before.


- Component directives
- Structural directives
- Attribute directives

Follow the steps below to create our own custom attribute directives in Angular.


# Step 1. [Creating a directive](https://www.educative.io/courses/a-hands-on-guide-to-angular/directives) by decorating a class with the `@Directive` decorator.

OR use the CLI to create a directive in your application.

```
ng generate directive <directive-name>
```
The directive would look something like this:

```
import { Directive, ElementRef, Renderer } from "@angular/core";	
@Directive({
	selector: '[app-ch-color]'	
})
export class bgDirective{
}
```

# Step 2. Injecting Services `ElementRef` and `Renderer`
After the class is ready, the next step is to take the instance of this and be able to use it on a component.

So, inside the constructor of the component, use:

```
constructor(private el: ElementRef, private renderer: Renderer){}
```

This instance of `Renderer` service can now be used to apply behavioral changes to the custom directive.

# Step 3. Registering your directive in the module

One important step is to let the module know about your custom directive, so next thing is to go to the relevant module, it be the root module `app.module.ts` or any feature module you might have in your application.

So inside the declarations array of your module, define your custom directive, for example, as follows:

```
import MyEducativeCustomDirective from '../my-custom-dir/my-custom-dir.ts'

export class AppModule{
   declarations: [
     MyEducativeCustomDirective,
   ]
}
```

# Step 4. Using your directive

```
import { Directive, ElementRef, Renderer } from "@angular/core";	
@Directive({
	selector: '[app-ch-color]'	
})	
export class bgDirective{
	constructor(private el: ElementRef, private renderer: Renderer){
	this.changeColor('red');
}	    
changeColor(color: string) {	        
  this.renderer.setElementStyle(this.el.nativeElement, 'color', color); 	    
}	
}
```


To dive deep into the usage of Custom Attribute Directives, we need to understand some terminology. 
When a custom Directive is applied to an HTML element, that element is called the **HOST ELEMENT**. So, in the above scenario, the custom directive is `[app-ch-color]`, and the HOST ELEMENT will be the `div` on which you apply `[app-ch-color]`.

```
<div app-ch-color>
	  Hello world!!!	
</div>	
<div>	  
      Hello from Educative!!! (No Custom Attribute)	
</div>
```

To capture the event of your host element, you need to use `@HostListener()`.

```
  import { Directive, ElementRef, Renderer, HostListener } from "@angular/core";	
@Directive({
  selector: '[app-ch-color]'	
})	
export class bgDirective{
 constructor(private el: ElementRef, private renderer: Renderer){	        
     this.changeColor('red');	    
}	    
@HostListener('click') foo(){	        
    alert('Host Element is clicked');	        
    this.changeColor('green');	    
}	    
changeColor(color: string){	        
 this.renderer.setElementStyle(this.el.nativeElement, 'color', color);  	   
  }	
}
```

So, to capture the event `foo()` for the host element `div`, we use `@HostListener()` that alerts that the host element is clicked. Similarly, to capture a property of the host element, we use `@HostBinding()`.

```
import { Directive, ElementRef, Renderer, HostListener } from "@angular/core";	
  @Directive({
     selector: '[app-ch-color]'
  })	
export class bgDirective{	    
  constructor(private el: ElementRef, private renderer: Renderer) {	        
      this.changeColor('red');	    
  }	    
@HostBinding('style.border') border : string;	    
@HostListener('click') koo(){	      
    this.border = '5px solid yellow';	    
}	    
changeColor(color: string){	        
   this.renderer.setElementStyle(this.el.nativeElement, 'color', color);  	    
  }	
}
```

This is a very basic example of understanding what Custom Directives are. We can solve much more complex requirements using Custom Directives in Angular.

Expected output from the demo below:

In this lesson, we will look at creating custom attribute directives as per our requirements.

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

Creating custom directives

Step 1. Creating a directive by decorating a class with the `@Directive` decorator.

Creating custom directives

Step 1. Creating a directive by decorating a class with the @Directive decorator.

Step 1. Creating a directive by decorating a class with the `@Directive` decorator.