Angular Material not working correctly
Question
I am learning AngularJS and I want to use Angular Material, I've downloaded it with npm install angular-material and I've imported it but it is not working. That is what I see, any help please?
This is my html code
<html>
<head>
<title>My store</title>
</head>
<body ng-app="tienda" ng-controller="tiendaCtrl">
{{name}}
<md-toolbar>
<div class="md-toolbar-tools">
<p><strong>My Store</strong></p>
<md-button><md-icon class='mdi mdi-plus-circle'></md-icon>New Classified</md-button>
</div>
</md-toolbar>
<script src="bower_components/angular/angular.js"></script>
<script src="node_modules/angular-material/angular-material.js"></script>
<script src="node_modules/angular-animate/angular-animate.js"></script>
<script src="node_modules/angular-aria/angular-aria.js"></script>
<script src="js/app.js"></script>
<script src="js/tienda.ctrl.js"></script>
</body>
This is my app.js file
var myApp = angular.module("tienda", ['ngMaterial']);
myApp.config(function($mdThemingProvider){
$mdThemingProvider.theme('default')
.primaryPalette('teal')
.accentPalette('orange');
});
2 answers
solution1
1 ACCPTED 2016-02-14 13:32:36
I think you are missing CSS files here. The directive works fine but the styling is not there. Have a look at their Github , under the CDN part, it is written what to import.
The CSS should be in your node_modules folder so I guess you should put this in your head :
<link rel="stylesheet" href="node_modules/angular-material/angular-material.css">
solution2
0 2020-12-07 10:00:20
This might be what you was looking for, you need to add few lines to styles in angular.json
"./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css"
This worked for me. Give a Try!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.