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

`![intro-directives](/api/collection/5854561945255936/5664668925296640/page/5574369343438848/image/6458493614686208)

A directive is used when you wish to extend the behavior of any HTML element. It helps us add or extend the behavior of any element in terms of its layout, appearance, etc. In the previous lesson, we created a component directive.  A component is also a type of directive, but it has a template of its own.

Directives work the same way we use selectors to reference components.

Angular has the following different types of directives:

- **Component directives**, which we have already seen.
- Attribute directives
- Structural directives

## Attribute directives

These directives help us extend the behavior or appearance of the elements inside the template. The most commonly used attribute directive is `NgStyle`. This helps you change the style of several elements in one go. We will also look at creating custom attribute directives in Angular later.

## Structural directives

These types of directives are most widely used in our Angular apps on a regular basis. These directives help us work on the layout of the data, for example looping through the data, applying conditions on the data, etc. The convention for a structural directive uses an asterisk (`*`) before the directive name.

The commonly used structural directives are `*ngFor` and `*ngIf`. 

`*ngFor` helps us loop through an array and `*ngIf` helps for the conditional rendering of the data.

Let's look at both of these in detail.

### *ngFor
The `*ngFor` directive is used in a template to loop through an array. Let’s assume we have an array with the name users, and we want to display its values as a list of items. Let’s see how to do that:
Let us see how to do that:


```
<table class ="table table-striped" >
  <tr *ngFor="let u of users">
    <td>
      {{u.id}}
    </td>
    <td>
      {{u.name}}
    </td>
    <td>
      {{u.model}}
    </td>

  </tr>
</table>
```

## *ngIf  
`*ngIf` is used to display an element based on a condition. This is how it works:

```
<div *ngIf="showElement">
  <div>This element is based on the showElement condition</div>
</div>
```

If the value of `showElement` is true, we will see this `div` on the view.

## Creating directives from the CLI

You can create a directive using the CLI the same way you create a component, 

```
ng generate directive <directive-name>
```

or the alias

```
ng g d <directive-name>
```

This will create two files for you, the `directive.ts` file and the `directive.spec.ts`

`![intro-directives](/api/collection/5854561945255936/5664668925296640/page/5574369343438848/image/6458493614686208)

A directive is used when you wish to extend the behavior of any HTML element. It helps us add or extend the behavior of any element in terms of its layout, appearance, etc. In the previous lesson, we created a component directive.  A component is also a type of directive, but it has a template of its own.

Directives work the same way we use selectors to reference components.

Angular has the following different types of directives:

- **Component directives**, which we have already seen.
- Attribute directives
- Structural directives

# Attribute directives

These directives help us extend the behavior or appearance of the elements inside the template. The most commonly used attribute directive is `NgStyle`. This helps you change the style of several elements in one go. We will also look at creating custom attribute directives in Angular later.

# Structural directives

These types of directives are most widely used in our Angular apps on a regular basis. These directives help us work on the layout of the data, for example looping through the data, applying conditions on the data, etc. The convention for a structural directive uses an asterisk (`*`) before the directive name.

The commonly used structural directives are `*ngFor` and `*ngIf`. 

`*ngFor` helps us loop through an array and `*ngIf` helps for the conditional rendering of the data.

Let's look at both of these in detail.

## *ngFor
The `*ngFor` directive is used in a template to loop through an array. Let’s assume we have an array with the name users, and we want to display its values as a list of items. Let’s see how to do that:
Let us see how to do that:


```
<table class ="table table-striped" >
  <tr *ngFor="let u of users">
    <td>
      {{u.id}}
    </td>
    <td>
      {{u.name}}
    </td>
    <td>
      {{u.model}}
    </td>

  </tr>
</table>
```

# *ngIf  
`*ngIf` is used to display an element based on a condition. This is how it works:

```
<div *ngIf="showElement">
  <div>This element is based on the showElement condition</div>
</div>
```

If the value of `showElement` is true, we will see this `div` on the view.

# Creating directives from the CLI

You can create a directive using the CLI the same way you create a component, 

```
ng generate directive <directive-name>
```

or the alias

```
ng g d <directive-name>
```

This will create two files for you, the `directive.ts` file and the `directive.spec.ts`

`![intro-directives](/api/collection/5854561945255936/5664668925296640/page/5574369343438848/image/6458493614686208)

A directive is used when you wish to extend the behavior of any HTML element. It helps us add or extend the behavior of any element in terms of its layout, appearance, etc. In the previous lesson, we created a component directive.  A component is also a type of directive, but it has a template of its own.

Directives work the same way we use selectors to reference components.

Angular has the following different types of directives:

- **Component directives**, which we have already seen.
- Attribute directives
- Structural directives

# Attribute directives

These directives help us extend the behavior or appearance of the elements inside the template. The most commonly used attribute directive is `NgStyle`. This helps you change the style of several elements in one go. We will also look at creating custom attribute directives in Angular later.

# Structural directives

These types of directives are most widely used in our Angular apps on a regular basis. These directives help us work on the layout of the data, for example looping through the data, applying conditions on the data, etc. The convention for a structural directive uses an asterisk (`*`) before the directive name.

The commonly used structural directives are `*ngFor` and `*ngIf`. 

`*ngFor` helps us loop through an array and `*ngIf` helps for the conditional rendering of the data.

Let's look at both of these in detail.

## *ngFor
The `*ngFor` directive is used in a template to loop through an array. Let’s assume we have an array with the name users, and we want to display its values as a list of items. Let’s see how to do that:
Let us see how to do that:


```
<table >
  <tr *ngFor="let u of users">
    <td>
      {{u.id}}
    </td>
    <td>
      {{u.name}}
    </td>
    <td>
      {{u.model}}
    </td>

  </tr>
</table>
```

# *ngIf  
`*ngIf` is used to display an element based on a condition. This is how it works:

```
<div *ngIf="showElement">
  <div>This element is based on the showElement condition</div>
</div>
```

If the value of `showElement` is true, we will see this `div` on the view.

# Creating directives from the CLI

You can create a directive using the CLI the same way you create a component, 

```
ng generate directive <directive-name>
```

or the alias

```
ng g d <directive-name>
```

This will create two files for you, the `directive.ts` file and the `directive.spec.ts`

In this lesson, we will look at directives, some commonly used directives, and how we can create custom attribute directives.

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

Directives

Attribute directives