Angular Toggle Button on more than 1 line

Question

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!

Are you using Bootstrap?

Corné
– Corné

2018-12-11 12:08:18 +00:00
Commented Dec 11, 2018 at 12:08 — Corné
– Corné, Commented Dec 11, 2018 at 12:08

Akash Srivastav · Accepted Answer · 2018-12-12 04:15:49Z

1

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.

answered Dec 12, 2018 at 4:15

Akash Srivastav

7665 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Adé Over a year ago

This works for me when using fxLayout="row wrap" instead, though the look becomes a bit wonky (messed up border lines, and extra space on right unless you do fxFlex="33.33%")

Collectives™ on Stack Overflow

Angular Toggle Button on more than 1 line

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related