Angular Material - Types of <md-button> in angular material - Angular Material Tutorial
Types of <md-button> in angular materia
Make sure you link the Angular and Angular Material libraries!
index.html:
<html ng-app="mdButtonApp">
<head>
<!-- Import Angular -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-aria.min.js"></script>
<!-- Angular Material -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.5.8/angular-material.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.css" rel="stylesheet">
<script src="app.js"></script>
</head>
<body>
<md-content ng-controller="mdButtonController">
<!-- Normal `md-button` -->
<md-button>Normal</md-button>
<md-button class="md-primary">{{text}}</md-button>
<md-button class="md-accent">{{text}}</md-button>
<md-button class="md-warn" ng-href="{{link}}">Google</md-button>
<md-button class="md-raised" ng-click="goToLink('http://example.com')">Link</md-button>
<md-button class="md-cornered md-primary md-hue-1">{{text}}</md-button>
<md-button class="md-accent md-hue-2">Some Button</md-button>
<md-button class="md-warn md-hue-3" ng-href="{{link}}">{{text}}</md-button>
</md-content>
</body>
</html>Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy angular material tutorial , angular 4 material , angular material2 , angular material example team
app.js:
angular.module('mdButtonApp', ['ngAnimate', 'ngAria', 'ngMaterial', 'ngMessages'])
.controller('mdButtonController', function($scope) {
$scope.text = "Button";
$scope.link = "https://google.com";
$scope.goToLink = function(link) {
// Go to some site
console.log('Redirecting to:' + link);
window.location.href=link;
}
})Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy angular material tutorial , angular 4 material , angular material2 , angular material example team
This angular material provides most of the technology areas such as angular material example , angular material download , angular material design template , angular material vs bootstrap , angular material for angular 2 , what is angular material , angular material demo , angular material2 , angular material demo , angular 4 material , angular material npm , angular material tutorial , angular material cdn , angular material vs bootstrap
World's No 1 Animated self learning Website with Informative tutorials explaining the code and the choices behind it all.
© 2016 - 2024 KaaShiv InfoTech, All rights reserved. Powered by Inplant Training in chennai | Internship in chennai