CODEWITHSUNDEEP
javascripthtmlcssangularjsangularjs-material
rma
rma

Reputation: 1958

How to display md-button as md-raised using AngularJS Material

I am trying to have my buttons styled with AngularJS Material. Specifically, I want to use md-button with class md-raised.

However, when I try this my button looks like regular text rather than an md-button. What could I be doing wrong?

Here is my index.html where I am trying to place the button. 

<!doctype html>
<html>
<head>
    <!--Angular scripts-->
    <link href="./node_modules/angular-material/angular-material.css" rel="stylesheet" />
    <script src="./node_modules/angular/angular.js" type="text/javascript" ></script>
    <script src="./node_modules/angular-animate/angular-animate.js" type="text/javascript" ></script>
    <script src="./node_modules/angular-aria/angular-aria.js" type="text/javascript" ></script>
    <script src="./node_modules/angular-material/angular-material.js" type="text/javascript" ></script>
    <script src="node_modules/angular-route/angular-route.js"></script>
    <script src="node_modules/angular-resource/angular-resource.js"></script>
    <script src="mainController.js"></script>
</head>
<body>
    <md-button class="md-raised">Button</md-button>
</body>

Upvotes: 0

Views: 707

Answers (2)

Edric
Edric

Reputation: 26851

The reason why it didn't appear is because you forgot to initialize your app!

// Initialize your app here and add `ngMaterial` dependency
angular.module('App', ['ngMaterial']);
<!-- Also add your ng-app directive -->
<html ng-app="App">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-messages.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-material.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-material.min.css">
</head>

<body>
  <md-button class="md-raised">Test</md-button>
</body>

</html>

Upvotes: 1

rma
rma

Reputation: 1958

I was able to accomplish this by adding

    <div class="md-button md-raised">
        <p>Button</p>
    </div>

instead of 

<md-button class="md-raised">Button</md-button>

I'm not sure why this works though, and any feedback would be greatly appreciated.

Upvotes: 0

Related Questions