2

I am unable to render the images side by sideenter image description here

  <div class="row">
       <div class="col">
           <div *ngFor="let ir of imagesSource">
                <div class="row">
                    <div class="col-md-3">
                                            <img class="fade images" src="{{ir?.contentUrl}}" (click)="ImageSource(ir?.hostPageUrl)" frameborder="0" allowfullscreen>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

How can i render images side by side, 3 in each row

Pein
  • 423
  • 3
  • 11
  • 27
  • Put the ngFor on the .col-md-3, not on the .row or its parent. Otherwise, well, you'll have one row per image. And make it a col-md-4, because 12 / 3 is 4, not 3. – JB Nizet May 14 '17 at 12:27

2 Answers2

2

You have divide you row calculation to 12. Because of you kept ngFor in wrong location, it repeats row with single item. You could just have a simple row as wrapper div and repeat inner div with col-md-3

<div class="row">
      <div class="col-md-3" ngFor="let ir of imagesSource">
         <img class="fade images" 
            src="{{ir?.contentUrl}}" 
            (click)="ImageSource(ir?.hostPageUrl)" frameborder="0" allowfullscreen>
      </div>
</div>
Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299
  • Pankaj can you help me i have a question on stackoverflow look the link bro http://stackoverflow.com/questions/43963853/how-to-loop-to-2-times-deeper-in-angular2-4-with-ngfor – George C. May 14 '17 at 12:30
1

This solution help me

<div class="row">
   <div *ngFor="let ir of imagesSource" class="col-md-3">
       <img class="fade images" src="{{ir?.contentUrl}}" (click)="ImageSource(ir?.hostPageUrl)" frameborder="0" allowfullscreen>
   </div>          
</div>
George C.
  • 6,574
  • 12
  • 55
  • 80