CODEWITHSUNDEEP
htmlangularangular-material
Snixells
Snixells

Reputation: 121

Angular Toggle Button on more than 1 line

I want to implement a few angular toggle buttons. I don't exactly know how many, that depends on my database data.

The buttons are shown on a sidebar, which means that only up to 3 buttons can be rendered in one line.

Is there a way to break to a new line after e.g. 3 buttons ? Without creating a new mat-button-toggle-group ?

Here's my code: 

      <mat-button-toggle-group multiple name="categories_1" ngModel aria-label="Kategorien">
        <mat-button-toggle value="LOREM1_1" checked>Value1</mat-button-toggle>
        <mat-button-toggle value="LOREM1_2" checked>Value2</mat-button-toggle>
        <mat-button-toggle value="LOREM1_3" checked>Value3</mat-button-toggle>
        <mat-button-toggle value="LOREM2_1" checked>Value4</mat-button-toggle>
      </mat-button-toggle-group>

Thanks for your help!

Upvotes: 0

Views: 3478

Answers (1)

Akash Srivastav
Akash Srivastav

Reputation: 766

You can use flex for this.

<mat-button-toggle-group fxLayout="row" multiple name="categories_1" ngModel aria-label="Kategorien">
    <mat-button-toggle fxFlex="33%" value="LOREM1_1" checked>Value1</mat-button-toggle>
    <mat-button-toggle fxFlex="33%" value="LOREM1_2" checked>Value2</mat-button-toggle>
    <mat-button-toggle fxFlex="33%" value="LOREM1_3" checked>Value3</mat-button-toggle>
    <mat-button-toggle fxFlex="33%" value="LOREM2_1" checked>Value4</mat-button-toggle>
    ...
</mat-button-toggle-group>

Or you can also loop through with *ngFor in case of unknown number of items, and still use the 33% flex width to get 3 items per line. You can adjust the width% to get more or fewer items in a single line.

Upvotes: 1

Related Questions