How to create the bootstrap rows and columns dynamically in ng for loop

I have the data(number of maps)coming from the backend, So I need to place the maps on the page.
But the maps has to place even and odd condition
(i.e if the length of the maps are one it has to show the map on entire page. if it is two it has to place the two maps in a row if it is three it has to show two maps in one row and one map in another row with entire width)

dashboard.component.html

 
          <div class="col-sm-5"  *ngFor="let map of sensors; let i = index" >
            <span *ngIf = "sensors.length % 2 == 1 && i < sensors.length - 1">  
             
            <div id="map{{i}}" style="height: 300px;border: 1px solid gray;">
            </div>
                    </span>

                    <span *ngIf = "sensors.length % 2 == 0">  
                      <div id="map{{i}}" style="height: 300px;border: 1px solid gray;">
                      </div>
                              </span>
                    
          </div>
          <span *ngIf = "sensors.length % 2 == 1">
            <div class="col-sm-8">
            <div id="map{{sensors.length - 1}}"  style="height: 300px;border: 1px solid gray;">
            </div>
            </div>
                    </span>
        
        
      </div>
    </div>

For the above code two maps are loading but third map is not loading.

I have tried multiple ways but not able to find the solution, can anyone help me regarding this.

Source: Angular Questions

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.