Divide the toggle buttons into separate rows for better organization

Question

Divide the toggle buttons into separate rows for better organization

Snippet:

<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>

Below is the layout with more than 5 items in 'test' array :

https://i.sstatic.net/Ro2z6.jpg

The expected design:

https://i.sstatic.net/vLDgp.png

I've experimented with various CSS properties like display, width, and height but couldn't achieve the desired outcome. How can I arrange the buttons into rows instead?

css angular angular-material material-ui togglebutton

Answer 1

Answer №1

As mentioned in this reference, a simple function can be created to divide the initial array into smaller arrays of equal length.

Once you have your array of arrays, it is easy to loop through them as indicated by @Frost 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 prefer to maintain your one-dimensional array, you can iterate through it and utilize modulo to insert a blank element for transitioning to the next line, like so:

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

Answer 2

As mentioned in this reference, a simple function can be created to divide the initial array into smaller arrays of equal length.

Once you have your array of arrays, it is easy to loop through them as indicated by @Frost 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 prefer to maintain your one-dimensional array, you can iterate through it and utilize modulo to insert a blank element for transitioning to the next line, like so:

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

Divide the toggle buttons into separate rows for better organization

Answer №1

Similar questions

Should FormBuilder be utilized in the constructor or is it considered a poor practice?

Tips for addressing the ExpressionChangedAfterItHasBeenCheckedError issueWould you like a way

Encountering an issue with Angular 12 where a TypeError is being thrown, specifically stating "Cannot read properties of null (reading 'length') at

Apply CSS code to create a fading effect for a container

From Table to DIV: A Simple Conversion

Achieve the positioning of a Bootstrap navbar within a div without it getting wrapped by following

Trouble with jQuery on click function, no actions triggered

Is there a left and right margin when incorporating Bootstrap grid?

Ways to emphasize the contrast between two texts using CSS

Mastering ForEach Loops and SetTimeout in Angular 6: A Comprehensive Guide

Is there a way to position the Bootstrap navbar menu items in the center specifically for mobile devices?

Styles for Django Rest Framework admin interface are not displaying correctly

React along with Material UI offers an effective method to avoid the child tree from remounting while toggling the parent theme

Switch up your text display using JQuery and toggle between different texts

Accessing external data in Angular outside of a subscription method for an observable

The white-spaces in Quill JS do not retain their original formatting

Checking to see if the prop 'isChecked' has been modified

Incorporate Angular frontend into current website or project

Achieving uniform distribution of items within a flex container

Issue encountered with the inability to successfully subscribe to the LoggedIn Observable