Search code examples
angulargrid-layoutionic2

Arranging items in rows and columns in ionic2

I need to arrange buttons in a matrix format as shown here . I am trying to get reproduce this in an app ionic2 mobile app.
This is my attempt to convert it to angular2 *ngFor and *ngIf. 

 <div *ngFor="tag in item.tags;let tagIndex = index">
        <div class="row" *ngIf="index % 3 == 0">
          <div *ngFor="i in [0,1,2]">
            <div *ngIf="(tagIndex + i)<item.tags.length"
                <button style="margin:5px">{{item.tags[tagIndex+i]}}</button>
            </div>
          </div>
        </div>  
  </div>

I did not even show the buttons. I tried using <ion-row> and <ion-col> tags of ionic2. It worked. But, the buttons are not uniformly placed as shown below.

enter image description here

The code to display using <ion-row> is this... 

<ion-row id="footer">
    <ion-col style="margin:5px 5px 5px 5px" *ngFor="let tag of item.tags">
        <button [innerHtml]="tag" (click)="tagClicked($event, tag)"></button>
    </ion-col>
</ion-row>

css 

#footer {
    float:left;
    clear: both;
    text-align: center;
    padding: 5px;        
    flex-wrap:wrap;
    display:flex;
}

If using <ion-row> is the better approach since the framework takes care of displaying all the tags in a gridlayout, how should I make them arrange with uniform distance ?

Solution

  • I got it working now. I had few syntax errors in my earlier code. For eg., 

     <div *ngFor="tag in item.tags;let tagIndex = index"> .

    Instead of of I put in. Now with the code fixed, I am able to get the buttons uniformly displayed. This is the final code. 

    <div  *ngFor="let tag of item.tags;let tagIndex = index">
         <div id="footer" *ngIf="tagIndex % 3 == 0">
              <div *ngFor="let i of [0,1,2]">
                <button class="col" style="margin:5px" *ngIf="(tagIndex + i) < item.tags.length" class="col" style="margin:5px">{{item.tags[tagIndex +i]}}</button>
                </div>
         </div>
  </div>

    The css remains the same.