The ForEach Loop in Angular can be used to perform some action for each item in a given array or object. This is similar to the foreach loop in other languages like JavaScript, PHP, etc. where the loop is used with arrays or other collections. In AngularJS, it is a little different, as it iterates through each element of the given array or object. In this blog on “forEach in Angular”, you will learn how to implement the forEach function with examples, in the following sequence.
forEach Loop in Angular
forEach in Angular invokes the iterator function once for each item in obj collection, which can be an object or array. The iterator function is invoked with iterator(value, key, obj), where the value is the object property or an array element, the key is the array element index or object property key, and obj is the obj itself. Check out this web developer course today to learn more about Angular.
Syntax of using forEach function
Below is the way to use the forEach function of AngularJS:
angular.forEach(object_or_Array, iterator, [context]);
Here, the first parameter can be an object or an array and the second parameter is an iterator function invoked for each item in object or array.
Demo of using Angular forEach
<html>
<head>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%20%22%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.2%2Fangular.min.js%22%3E%20%0A%20%20%20%20%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<title>angular.forEach()</title>
</head>
<body ng-app="app" ng-cloak style="padding:30px">
<h1 style="color:Blue">Learn with Edureka</h1>
<h2>Applying angular.forEach()</h2>
Directives in Angular
<div ng-controller="test">
<div ng-repeat="name in names">
<ul>
<li>{{name}}</li>
</ul>
</div>
</div>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%20%0A%20%20%20%20%20%20%20%20var%20app%20%3D%20angular.module(%22app%22%2C%20%5B%5D)%3B%20%0A%20%20%20%20%20%20%20%20app.controller('test'%2C%20%5B'%24scope'%2C%20function%20(%24scope)%20%7B%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%24scope.names%20%3D%20%5B%5D%3B%20%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20values%20%3D%20%5B%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Bname%3A%20'Component%20Directives'%7D%2C%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Bname%3A%20'Structural%20Directives'%7D%2C%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Bname%3A%20'Attribute%20Directives'%7D%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%5D%3B%20%0A%20%20%20%20%20%20%20%20%20%20%20%20angular.forEach(values%2C%20function%20(value%2C%20key)%20%7B%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24scope.names.push(value.name)%3B%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%20%0A%20%20%20%20%20%20%20%20%7D%5D)%3B%20%0A%20%20%20%20%20%0A%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</body>
</html>
Output:
This brings us to the end of this blog on “ForEach Loop in Angular”. I hope it was informative and added value to your knowledge.
If you wish to learn more about Angular framework, then check out our Angular Course which comes with instructor-led live training and real-life project experience. This training will help you understand Angular in-depth and help you achieve mastery over the subject. Enroll in a Flutter Certification Course and become an expert in building cross-platform mobile apps with ease.
Learn the latest trends and techniques in UI/UX design through UX Design Course.
Got a question for us? Please mention it in the comments section of “ForEach Loop in Angular” and we will get back to you.