Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular material not working

I wanted to use angular material in an AngularJS application so I downloaded it with all its dependencies:

<script src="bower_components/hammer/hammer.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-aria/angular-aria.min.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<script src="bower_components/angular-material/angular-material.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script src="bower_components/angular-resource/angular-resource.min.js"></script>

And then I included it in my App:

var myApp = angular.module('myApp', ['ngRoute', 'ngResource', 'ngSanitize', 'ngMaterial', 'ngAnimate', 'ngAria']);

After that I wanted to try it on a button:

<md-container> <md-button>boutton1</md-button> </md-container>

And here is the result ( on Chrome and Firefox): enter image description here

And when I click on it I have this: enter image description here

Did I do something wrong?

like image 769
Yass Ikrou Avatar asked Mar 01 '15 21:03

Yass Ikrou


People also ask

Why angular material is not installing?

Angular Material does not install Angular, it requires you to install it (the same way Angular requires you to have RxJS). Check your package. json to see what version of Angular you have. Also, update your global angular-cli package, probably you've got an older one.

How do you check angular material is installed or not?

Type npm -v in the terminal to check if npm is installed or not in our system. It displays the version of npm. Angular installations are easy with the help of Angular CLI. Visit https://cli.angular.io/ to get the reference of the command.

Can material UI be used with angular?

It integrates easily with Angular Projects because it is built with Angular structure. It can be incorporated with new or existing Angular Application despite the version. It provides tools for developers to build/customize their components. It speeds up the development process of building UI components from scratch.


2 Answers

Alternatively, if you are using Angular CLI, you can insert this line @import "~@angular/material/prebuilt-themes/indigo-pink.css"; into your styles.css.

Just make sure to follow the official instructions https://material.angular.io/guide/getting-started

like image 171
Fzum Avatar answered Oct 23 '22 01:10

Fzum


It looks like you are not including the stylesheet.

Try adding the following:

<link rel="stylesheet" href="bower_components/angular-material/angular-material.min.css" type="text/css">
like image 32
Ryan Avatar answered Oct 23 '22 00:10

Ryan