Angular Directive Example

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

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 List

Here are some commonly used Angular Directives we use while developing single page web application

• 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

Below are some examples of how to use angular directives in html code.

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'}]

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>

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>

    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

You may be interested in following posts

• How to use Angular Expression for Data Binding
• Angular filter service
• angular form validation example