CODEWITHSUNDEEP
angularstylingangular-material2
moohkooh
moohkooh

Reputation: 927

Angular Material 2 with Angular 2.4-x styling problems

i trying to use Angular Material 2 with Angular 2.4.2, but some components like radio or checkbox does not work correctly.

SystemJS configuration:

System.config({
  transpiler: 'typescript',
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  map: {
    app: "./src",

    '@angular/core': 'npm:@angular/[email protected]/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/[email protected]/bundles/common.umd.js',
    '@angular/compiler': 'npm:@angular/[email protected]/bundles/compiler.umd.js',
    '@angular/platform-browser': 'npm:@angular/[email protected]/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/[email protected]/bundles/platform-browser-dynamic.umd.js',
    '@angular/http': 'npm:@angular/[email protected]/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/[email protected]/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/[email protected]/bundles/forms.umd.js',
    '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
    'hammerjs': 'npm:hammerjs/hammer.js',

    '@angular/core/testing': 'npm:@angular/[email protected]/bundles/core-testing.umd.js',
    '@angular/common/testing': 'npm:@angular/common/[email protected]."0"/common-testing.umd.js',
    '@angular/compiler/testing': 'npm:@angular/[email protected]/bundles/compiler-testing.umd.js',
    '@angular/platform-browser/testing': 'npm:@angular/[email protected]/bundles/platform-browser-testing.umd.js',
    '@angular/platform-browser-dynamic/testing': 'npm:@angular/[email protected]/bundles/platform-browser-dynamic-testing.umd.js',
    '@angular/http/testing': 'npm:@angular/[email protected]/bundles/http-testing.umd.js',
    '@angular/router/testing': 'npm:@angular/[email protected]/bundles/router-testing.umd.js',

    'rxjs': 'npm:rxjs'
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    },  
    rxjs: {
      defaultExtension: 'js'
    }
  },
  paths: {
    'npm:': 'https://unpkg.com/'
  }
});

AppModule

@NgModule({
  imports: [ BrowserModule, MaterialModule.forRoot() ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

AppComponent

@Component({
  selector: 'my-app',
  template: `
    <h1>Angular 2.4.0 with Material2</h1>

    <div>
      <md-input-container>
        <input md-input type="text" placeholder="foobar">
      </md-input-container>
    </div>
    <div>
      <md-checkbox [checked]="true">test</md-checkbox>
    </div>
    <div>
      <md-radio-group>
        <md-radio-button value="option_1">1</md-radio-button>
        <md-radio-button value="option_2">2</md-radio-button>
      </md-radio-group>
    </div>
    <div>
      <md-select placeholder="Select">
        <md-option [value]="A"> Value A </md-option>
        <md-option [value]="B"> Value B </md-option>
        <md-option [value]="C"> Value C </md-option>
      </md-select>
    </div>
  `
})
export class App implements OnInit {
  constructor() {}

  ngOnInit() {}
}

I create a plunkr with that problem: https://plnkr.co/edit/T1pjY1so6N1YXx3Trq7x

Additional i checked out a fresh version of angular-seed from mgechev https://github.com/mgechev/angular-seed to validate material 2 with a fresh configuration, but i get the same styling issue. I dont get whats wrong with my configuration?

Upvotes: 1

Views: 486

Answers (1)

Maciej Treder
Maciej Treder

Reputation: 12342

It looks like you don't have theme. It should be fixed when you introduce it:

https://github.com/angular/material2/blob/master/guides/theming.md

Upvotes: 1

Related Questions