Angular From Scratch Tutorial – Step 5: Directives

Angular From Scratch Tutorial – Index

PREVIOUS: Angular From Scratch Tutorial – Step 4: Adding Bootstrap

NEXT: Angular From Scratch Tutorial – Step 6: Dependency Injection and Service

TARGET

The purpose of this page in this tutorial series is to provide a very fast approach that is useful for revisions when you have already dealt with Angular, but after an absense of using it, it turns necessary to do a “disk swap” bringing from “disk” to your “memory” again. 🙂

If it is your first Angular approach, or you are a newbie, it is recommended to go first to the Angular’s documentation. After, this page will serve you as a summary for fast referencing and revision.

Source Code/Download

For more details, the source code may be found on GitHub, “step3” tag (includes step1 up to step3).

What are directives?

Directives are the building blocks of angular applications.
Every time you see or use something like <my-app> or <div *my-directive>, you are using some form of an Angular directive.

Types of directives

1. Built-in directives.

Those that comes with the native code, APIs, libraries.
Ex.: ngFor, ngIf, etc.
Go to angular.io/guide/built-in-directives

2. Attribute directives

Attribute directives alter the appearance or behavior of an existing element.
Ex.: ngModel examined on previous step (step4).
The perfect page to get the grips is angular.io/guide/attribute-directives.

3. Structural Directives

Go to angular.io/guide/structural-directives

 

 

NEXT

Angular From Scratch Tutorial – Index

NEXT: Angular From Scratch Tutorial – Step 6: Dependency Injection and Service

PREVIOUS: Angular From Scratch Tutorial – Step 4: Adding Bootstrap

 

Credits

angular.io/guide/attribute-directives
live example / download example
angular.io/guide/built-in-directives
angular.io/guide/structural-directives
angular.io/guide/attribute-directives.