CODEWITHSUNDEEP
angularangular-material
HirenParekh
HirenParekh

Reputation: 3735

Angular Material 2.0.0-beta.1 components are not rendering correctly

I was just checking angular material 2 and none of the component is working correctly in my application.the version of angular material 2 is 2.0.0-beta.1.

I just followed the getting started guide provided on the angular material 2 github repository.

This is my html template,

<md-card>
  <button md-button>FLAT</button>
  <button md-raised-button md-tooltip="This is a tooltip!">RAISED</button>
  <button md-raised-button color="primary">PRIMARY RAISED</button>
  <button md-raised-button color="accent">ACCENT RAISED</button>
</md-card>

<md-card>
  <md-checkbox>Unchecked</md-checkbox>
  <md-checkbox [checked]="true">Checked</md-checkbox>
  <md-checkbox [indeterminate]="true">Indeterminate</md-checkbox>
  <md-checkbox [disabled]="true">Disabled</md-checkbox>
</md-card>

<md-card>
  <md-radio-button name="symbol">Alpha</md-radio-button>
  <md-radio-button name="symbol">Beta</md-radio-button>
  <md-radio-button name="symbol" disabled>Gamma</md-radio-button>
</md-card>

which rendered like this in the browser.

output screen shot

I am clueless here. I need help to figure out the problem.

Upvotes: 2

Views: 448

Answers (1)

Poul Kruijt
Poul Kruijt

Reputation: 71901

You should always apply a theme to material:

You can include a theme file directly into your application from @angular/material/core/theming/prebuilt

All you have to do is add an import into your style css/scss:

for example:

@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';

You can also define a custom theme. For more information you should read the theming readme:

custom material theming

Upvotes: 4

Related Questions