angular-notification-icons

github

Getting Started

1
 
<notification-icon count="vm.autoPending[0]">
  <i class="fa fa-envelope-o fa-3x"></i>
</notification-icon>

Default Animations

0
 Grow
0
 Bounce
0
 Shake
0
 Bounce on disappear 
<notification-icon animation="grow" count="vm.pending">
  <i class="fa fa-envelope-o fa-3x"></i>
</notification-icon>

<notification-icon animation="bounce" count="vm.pending">
  <i class="fa fa-envelope-o fa-3x"></i>
</notification-icon>

<notification-icon animation="shake" count="vm.pending">
  <i class="fa fa-envelope-o fa-3x"></i>
</notification-icon>

<notification-icon animation="none" disappear-animation="bounce" count="vm.pending">
  <i class="fa fa-envelope-o fa-3x"></i>
</notification-icon>

Custom style and animations

0
JS 
<notification-icon animation="my-custom-animation" ng-init="vm.customPending = 0" count="vm.customPending">
  <i class="fa fa-envelope-o fa-3x"></i>
</notification-icon>
CSS 
.custom-style .angular-notification-icons-icon {
  left: -10px;
  background: yellow;
  color: black;
  width: 30px;
  height: 30px;
  font-weight: bolder;
  font-size: 1.2em;
}

.angular-notification-icons-icon.my-custom-animation {
  transition:0.5s linear all;
}

.angular-notification-icons-icon.my-custom-animation-add {
  background: black;
  color: white;
}

.angular-notification-icons-icon.my-custom-animation-add-active {
  background: yellow;
  color: black;
}

DOM Events

 
<notification-icon ng-init="vm.mycount" count="vm.domCount" clear-trigger="click">
  <button class="btn btn-default">Click to Clear</button>
</notification-icon>

<notification-icon count="vm.domCount" clear-trigger="mouseover">
  <button class="btn btn-default">Hover to Clear</button>
</notification-icon>

Hidden Counter

 
<notification-icon appear-animation="grow" update-animation="none" disappear-animation="grow" ng-init="vm.hiddenPending" hide-count="true" count="vm.hiddenPending">
  <i class="fa fa-envelope-o fa-3x"></i>
</notification-icon>

Always Show

0
 
<notification-icon animation="shake" ng-init="vm.alwaysShowCount = 0" count="vm.alwaysShowCount" always-show="true">
  <i class="fa fa-envelope-o fa-3x"></i>
</notification-icon>

Pill Shape

98
 
<notification-icon count="vm.autoPending[1]">
  <i class="fa fa-envelope-o fa-3x"></i>
</notification-icon>

Usage

1. Install bower component

bower install angular-notification-icons --save

2. Add css and script

<link rel="stylesheet" href="bower_components/angular-notification-icons/angular-notification-icons.min.css">

<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-notification-icons/angular-notification-icons.min.js"></script>

3. Add a dependency to your app

angular.module('MyApp', ['angular-notification-icons']);

4. Add a notification-icon element around any other element

<notification-icon count="scopeVariable">
  ...
</notification-icon>