Free Web Development Online Tutorials, Learn to Code
Learn AngularJS, angularjs tutorial, angularjs directive, angularjs application, angularjs api

Angular JS Directives

Here you learn about Angular Directives, what are the different type of directives in angular framework. how to use them, how to create custom directives in angular..etc.

What is Directives in Angular JS?

AngularJS lets you extend HTML with new attributes called Directives, Directives in Angular is a js class, declared as @directive. AngularJS has a many built-in directives which ocan be used for functionality development in application, we also can make custom directives.

In AngularJs we have three different type of directives

  • Component Directives
    This is basically class definition, define how the component should be instantiated, processed and used at runtime.
  • Structural Directives
    Structural directives start with * sign before directive. Here are some example: *ngIf , *ngFor
  • Attribute Directives
    Attributes directives are used for behavior and how the element will look like

Learn more about Angular directive

Angular Directives Examples

Directive Description
ng-app root level element of an application
ng-bind Binds the data to a HTML element
ng-blur Specifies what should happen on blur events
ng-change Specifies an expression to evaluate when user changing the content.
ng-checked Specifies if checkbox is checked.
ng-click Specifies an expression to evaluate when any element is clicked
ng-repeat This directive is type of loop, it repeats data item and HTML element for each item in current collection.
ng-init Initialize application data for that a particular ng-app directive

How to use ng-init, ng-repeat in angular
Here is an example of how you can write angular directives ng-init, ng-repeat within your html code

 <div ng-app = "" ng-init = "countries = [{country:'India',currency:'INR'}, 
   {country:'USA',currency:'USD'}, {country:'UK',currency:'GBP'}]">
     <ol style="margin-left:50px;">
       <li ng-repeat = "c in countries">
         {{ 'Country: ' + c.country + ', currency: ' + c.currency }}
       </li>
    </ol>
 </div>

In above code you can see ng-repeat="c in countries" , here countries is the collection object declared and initialized in ng-init directive.

Things to notice

  1. In above code ng-app is the root level, all other directives are within that scope
  2. The data is in json format
    [{country:'India',currency:'INR'},{country:'USA',currency:'USD'}, {country:'UK',currency:'GBP'}]
Result of above angular code

  1. {{ 'Country: ' + c.country + ', currency: ' + c.currency }}
How to use *ngIf, *ngFor directive in AngularJs

Now you already know there are directives like *ngIf which is like if else statement in plain javascript, and *ngFor which is like for loop, so we learn how to use them with html DOM

Angular directive *ngIf example

 <p *ngIf="!students"> <em>Loading student list... </em> </p>
in above statement we are checking if student object is null.

Angular directive *ngFor example

Now in below statement, we will check if students object not null, then we loop through the collection and print each student details

 <table class='table' *ngIf="students" >
<thead>
<tr>
<th>Name </th>
<th>Address </th> </tr>
</thead>
<tbody>
<tr *ngFor="let s of students" >
<td>{{ s.fullname }} </td>
<td>{{ s.address }} </td>            
</tr>
</tbody>
</table>
To simplify further, the above code says
    if(students!=null)
    {
        foreach(student s in students)
        {
            console.write(s.fullname);
        }
    }

Hope you got some understanding of Angular directives and how to work with them in html code

 
AngularJS Directives

Othe JavaScript Framework
Angular JS Examples | Join Asp.Net MVC Course