Angular2 material. How to get common css to create layout with material css?

Question

I have included material package into my first angular2 project. link i have followed.

And added theme to project to work with colours of buttons.

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

But i am missing important class like container , teal , text-blue (like colour options and ligthen-<x>).

Most importantly row and col classes to create layout. How can get all the power of material-css here.

I have tried to include css part from CDN and it backfired.

e.g. md-input there will be two border with different themes. am i missing something here. guide me in the right direction.

Answer 1

Yes, by default css theme is missing when you install angular2-material. To make it work, apply this in the header of index.html

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

Or download the css locally, put in the assets folder and import it in style.css

@import url("./assets/css/material.css");

Answer 2

It seems the link to the material CDN has changed.

<link href="https://unpkg.com/@angular/[email protected]/prebuilt-themes/indigo-pink.css" rel="stylesheet">