Angular Material Toast
Angular Material Toast: The service $mdToast is used to build to toast notification which can be placed anywhere on the screen. Here in this tutorial we are going to explain how you can create toast notification and place them on screen. You can also use our online editor to edit and run the code online.
Angular Material Toast Example
By default toasts are placed at the bottom when screen size is between 600px and 959px. Let us create a simple example using this service($mdToast)-
Angular Material Toast Example:
<html lang="en" >
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<script language="javascript">
angular
.module('myApp', ['ngMaterial'])
.controller('MyController', function ($scope, $mdToast) {
// controller code goes here..
$scope.openToast = function($event) {
$mdToast.show($mdToast.simple().textContent('Welcome to tutorialsplane.com'));
// You can also use $mdToast.showSimple('Welcome to tutorialsplane.com');
};
});
</script>
</head>
<body ng-app="myApp">
<div ng-controller="MyController as ctrl" ng-cloak="" >
<div layout="column" layout-fill>
<md-button ng-click="openToast()">
Open First Toast.
</md-button>
</div>
</div>
</body>
</html>
|
| Try It On → |
In the above example we have created a simple toast with default position which will display information at the default position ie. bottom.
Note : Make Sure you have imported the service $mdToast in controller.
If you run the above example it produce output something like this –
Advertisements
