1

I am building an application which requires mat button toggle group (material component) and this is the code,

    <mat-button-toggle-group appearance="legacy" name="fontStyle" aria-label="Font Style">
        <mat-button-toggle value="bold">Bold</mat-button-toggle>
        <mat-button-toggle value="italic">Italic</mat-button-toggle>
        <mat-button-toggle value="underline">Underline</mat-button-toggle>
    </mat-button-toggle-group>

But, it's not displaying correctly. It's displaying like,

enter image description here

Could any one figure it out what's the problem?

Kugesh Rajasekaran
  • 127
  • 2
  • 9

1 Answers1

1

You need to import or define a theme for angular material, add the following import to your styles.css

@import '~@angular/material/prebuilt-themes/indigo-pink.css';
Mr. Stash
  • 2,940
  • 3
  • 10
  • 24
  • Yea... It's working. But, I couldn't understand why it is working. Could you explain me? – Kugesh Rajasekaran Oct 30 '22 at 11:41
  • angular material does not apply any styling by default, you either have to import any of the prebuilt themes like in the example, or define your own using scss. – Mr. Stash Oct 30 '22 at 15:46