ngIf for iterating through two different Arrays

angular 4 ngfor multiple arrays
ngfor angular 8
ngfor count
ngfor trackby
angular 4 ngfor example
angular loop through array in html
ngforof
ng-template ngfor

I have this piece of code:

<tr ng-repeat="row in someController.searchResults" 
    ng-class="{'selected': tableRow.selected}" 
    ng-click="selectRow(tableRow)" >

In this piece of code I'm iterating through searchResults array.

I need to add a condition (want to do it with ngIf).

  • If the condition is true I'll iterate through someController.searchResults
  • If condition is false I want to iterate through another Array e.g: someController.someOtherSearchResults

How can I achieve that?


You can use plain javascript in the ng-repeat attribute, like so:

<tr ng-repeat="row in (someController.importantBoolean ? someController.searchResults : someController.someOtherSearchResults)" 
        ng-class="{'selected': row.selected}" 
        ng-click="selectRow(row)" >
</tr>

See the following plunker for an example: https://plnkr.co/edit/Nxh9gVB9GDP5FaLVDGrS

combining *ngIf and *ngFor executes loop with a last undefined item , In case the two directives *ngIf and *ngFor are combined, than the the *ngFor should only iterate over the items actually in the array / the *ngIf  Angular ngFor - Learn all Features including trackBy, why is it not only for Arrays? Last Updated: 24 April 2020 local_offer Angular Core In this post we are going to go over the ngFor core directive, namely we are going to go over the following:


Try this,

<div ng-if="Your condition(True)"> <tr ng-repeat="row in 
someController.searchResults" 
ng-class="{'selected': tableRow.selected}" 
ng-click="selectRow(tableRow)" >

<div ng-if="Your condition(False)"> <tr ng-repeat="row in 
someController.someOtherSearchResults" 
ng-class="{'selected': tableRow.selected}" 
ng-click="selectRow(tableRow)" >

Hope this will help you.

Angular 9/8 ngFor Directive: Render Arrays with ngFor by Example , Check out How to repeat an HTML element or component multiple times in Angular 9/8? Using ngFor , we can iterate over the PRODUCTS array in the Both these two things can be done with the following two commands:. Use the zip() method to process the two arrays in parallel. var res = val.Zip(str, (n, w) => new { Number = n, Word = w }); The above fetches both the arrays with int and string elements respectively. Now, use foreach to iterate the two arrays −.


Please filter the data before passing the data to view.

if(condition){
    this.results=searchResults;
    else{
    this.results=someOtherSearchResults;
    }

And in template keep it simple:

   <tr ng-repeat="row in someController.results" 
        ng-class="{'selected': tableRow.selected}" 
        ng-click="selectRow(tableRow)" >

OR

<tr ng-if="condition" ng-repeat="row in 
someController.searchResults" 
ng-class="{'selected': tableRow.selected}" 
ng-click="selectRow(tableRow)" >

<tr ng-if="!condition" ng-repeat="row in 
someController.someOtherSearchResults" 
ng-class="{'selected': tableRow.selected}" 
ng-click="selectRow(tableRow)" >

Angular ngFor, In this post we are going to go over the ngFor core directive, namely we are Note that the loop variable hero is only visible inside the loop, you would not be be able to stripe a table by adding a different css class to the even or odd rows. Just like the even and odd functionality, there are also two other  ngFor will iterate the given array and hence id%2 will return 0 and 1 alternatingly. If the value is 0 then element with CSS class .one will be added to DOM otherwise the element with CSS class .two will be added to DOM. NgIf with Enum TypeScript enum can also be used with NgIf. To understand this we are creating an enum as given below. numEnum.ts


NgForOf, The function receives two inputs, the iteration index and the node object ID. When using the shorthand syntax, Angular allows only one structural directive on an If you want to iterate conditionally, for example, put the *ngIf on a container the second response produces objects with different identities, and Angular must  The shorthand syntax * ngIf expands into two separate template specifications for the "then" and "else" clauses. For example, consider the following shorthand statement, that is meant to show a loading page while waiting for data to be loaded.


NgFor • Angular, We use the NgFor directive to loop over an array of items and create multiple elements dynamically from a template element. We can get the index of the item we are looping over by assi… Overview · NgIf & NgSwitch If our data structure was in fact grouped by country we can use two ngFor directives, like so: Listing 1. Loop over multiple arrays (or lists or tuples or whatever they're called in your language) and display the i th element of each. Use your language's "for each" loop if it has one, otherwise iterate through the collection in order with some other loop. For this example, loop over the arrays: (a,b,c) (A,B,C) (1,2,3)


Angular UI Development with PrimeNG, <div *ngIf="show"> <h2>ngIf</h2> </div> Angular 4 has introduced a new else In the next code snippet, we iterate over the people array and store each item in  Iterating means going through elements one by one. As we deal with multi-dimensional arrays in numpy, we can do this using basic for loop of python. If we iterate on a 1-D array it will go through each element one by one.