Open In App

AngularJS ng-init Directive

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

The ng-init Directive is used to initialize AngularJS Application data. It defines the initial value for an AngularJS application and assigns values to the variables. The ng-init directive defines initial values and variables for an AngularJS application.

Syntax:

<element ng-init = "expression">
    ...
</element>

Example: This example describes the ng-init Directive by initializing an array of strings. 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        AngularJS ng-init Directive
    </title>
  
    <script src=
    </script>
</head>
  
<body>
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
  
    <h3>ng-init directive</h3>
  
    <div ng-app="" ng-init="sort=['quick sort', 
        'merge sort', 'bubble sort']">
        Sorting techniques:
        <ul>
            <li>{{ sort[0] }} </li>
            <li>{{ sort[1] }} </li>
            <li>{{ sort[2] }} </li>
        </ul>
    </div>
</body>
  
</html>


Output:

 

Example 2: The example describes the ng-init Directive by specifying the object with its properties & associated value of it.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        AngularJS ng-init Directive
    </title>
  
    <script src=
    </script>
</head>
  
<body style="text-align: center">
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
  
    <h3>ng-init directive</h3>
  
    <div ng-app="" ng-init=
        "objects={
            Company:'GeeksforGeeks', 
            Course:'Data Structures & Algorithms'
        }">
        <p>
            Learn {{ objects.Course }} 
            from {{ objects.Company }}
        </p>
    </div>
</body>
  
</html>


Output:

 



Last Updated : 28 Jul, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads