Join Class

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.

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 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.

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: ' + + ', currency: ' + c.currency }}

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: ' + + ', 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" >
<th>Name </th>
<th>Address </th> </tr>
<tr *ngFor="let s of students" >
<td>{{ s.fullname }} </td>
<td>{{ s.address }} </td>            
To simplify further, the above code says
        foreach(student s in students)

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

AngularJS Directives
Learn Angular JS: JavaScript framework for single page application.
JavaScript Framework
Angular JS Examples | Join Asp.Net MVC Course