How can I use angular material with angular 2?

Question

I've tried npm install angular-material --save and followed the instructions here.

Then I added the script and link to index.html

<script src="node_modules/angular-material/index.js"></script>
<link ref="stylesheet" href="node_modules/angular-material/modules/angular-material.css">

Then I tried adding a simple <md-button> but am having no luck.

Check out this website justindujardin.github.io/ng2-material — Eric Martinez
– Eric Martinez, Commented Dec 24, 2015 at 2:53
yes not all the components like angular 1.x are created using angular material for angular2 but few of them are created yet which is mentioned in the link proided by @EricMartinez — Pardeep Jain
– Pardeep Jain, Commented Dec 24, 2015 at 5:06

Mark Rajcok · Accepted Answer · 2016-05-27 01:53:38Z

3

Since this question was written, the Angular team has created the "Material Design for Angular 2" github project: https://github.com/angular/material2

See the Getting Started guide for installation instructions.

They want you to (install and) use the Angular CLI.

Since both projects are currently in alpha, the instructions below may change over time:

# install the CLI globally
npm install -g angular-cli

# create a new project
ng new my-project

# install Angular Material 2 components
npm install --save @angular2-material/{core,button,card}

answered May 27, 2016 at 1:53

Mark Rajcok

365k114 gold badges501 silver badges494 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

shaw kwok Over a year ago

I know this answer is a long time ago. I tried using the Angular CLI 'ng new my-project', and i see at the cmd that is installing, but it take so long to install it looks like it never ends with installing. Does somebody have the same problem?

Charleston · Accepted Answer · 2018-05-04 22:51:57Z

0

An alternative is use materialize from https://materializecss.com You just import this files into your index.html that is in src folder

<!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>

thus you can use material design ex:

 <label>
    <input type="checkbox" />
    <span>Red</span>
  </label>

answered May 4, 2018 at 22:51

Charleston

1,56918 silver badges10 bronze badges

Collectives™ on Stack Overflow

How can I use angular material with angular 2?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related