CODEWITHSUNDEEP
cssangularangular-materialmaterial-uitogglebutton
Huzaifa
Huzaifa

Reputation: 121

Split the toggle buttons into multiple rows

Code:

<mat-button-toggle-group value="0" (change)="toggleChangeQuestion($event)" name="selectQuestions" #group2="matButtonToggleGroup">
    <div *ngFor="let item of test; let i = index;">
        <mat-button-toggle *ngIf="!item.answer" value="{{i}}">{{i}}</mat-button-toggle>
    </div>
</mat-button-toggle-group>

This is how it looks when test.length is greater than 5 :

Result

The desired output:

enter image description here

I have tried various combinations of display, width and height CSS but nothing works. How can I split the buttons into rows?

Upvotes: 2

Views: 2746

Answers (1)

Alexis
Alexis

Reputation: 1784

According to this article, you can do a little function to split your first array into arrays of same length.

Once you got your array of array you can easily iterate over the arrays in your array as @Frost said in a comment.

<mat-button-toggle-group value="0" (change)="toggleChangeQuestion($event)" name="selectQuestions" #group2="matButtonToggleGroup">
  <div *ngFor="let array of test">
    <div *ngFor="let item of array; let i = index">
      <mat-button-toggle *ngIf="!item.answer" value="{{i}}">{{i}}</mat-button-toggle>
    </div>
  </div>
</mat-button-toggle-group>

If you want to keep your array of 1 dimension, you should iterate over it and use modulo to add a blank element to go to next line as follow

<ng-container *ngFor="let item of test; let i = index">
  <div style="display:block" *ngIf="i%5 == 0">
  </div>
  {{i}}
</ng-container>

Upvotes: 3

Related Questions