CODEWITHSUNDEEP
angularangular-material
Thinker
Thinker

Reputation: 5356

angular2 with angular material does not have any effect

I followed all the instructions as given here: https://material.angular.io/guide/getting-started

However no material style is being applied.

In my index.html:

  <!-- material theme -->
  <link href="node_modules/@angular/material/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

in module.ts:

import { MaterialModule } from '@angular/material';
import 'hammerjs';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MaterialModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

and then I have a component template as:

<form>
    <!-- title -->
    <md-input-container>
        <input md-input placeholder="Title">
    </md-input-container>
    <!-- Description -->
    <md-input-container>
        <input md-input placeholder="Description">
    </md-input-container>
    <!-- priority -->
    <md-select placeholder="Priority">
        <md-option *ngFor="let priority of priorities" >
            {{ priority }}
        </md-option>
    </md-select>
    <!-- tags -->
    <md-chip-list>
        <md-chip>UI</md-chip>
        <md-chip>Performance</md-chip>
        <md-chip>Design</md-chip>   
    </md-chip-list>


</form>

However looks like there is no theme applied, chips do not look like chips and there is no color basically.

enter image description here

What am I doing wrong?

Upvotes: 1

Views: 682

Answers (1)

Tiep Phan
Tiep Phan

Reputation: 12596

Guide for Angular CLI:

choose the theme you wanna use: indigo-pink, deeppurple-amber, pink-bluegrey, purple-green.

update beta.3

styles.css 

@import '~@angular/material/prebuilt-themes/deeppurple-amber.c‌​ss';

styles.scss

@import '~@angular/material/prebuilt-themes/indigo-pink';

===================

styles.css 

@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.c‌​ss';

styles.scss

@import '~@angular/material/core/theming/prebuilt/indigo-pink';

Upvotes: 1

Related Questions