How to get badge value of button in Angular JS

Question

I want badge value of a Button, this represent badge is data-text-as-pseudo-element i am new to angular so how do i get it ?

    <style 
    type="text/css">[data-text-as-pseudo-element]::before { content: attr(data-text-as-pseudo-element); }
    </style>


        <button role="tab" title="Chats" tabindex="0" aria-label="Chats, 1
           unread notification." aria-selected="true" style="position: relative;
           display: flex; flex-direction: column; flex-grow: 0; flex-shrink: 0;
           overflow: hidden; align-items: center; justify-content: center;
           background-color: transparent; border-color: transparent; text-align:
           left; border-width: 0px; width: 80px; padding-top: 2px; height: 50px;
           cursor: pointer; border-style: solid;">
    <div role="none"
           style="position: relative; display: flex; flex-direction: column;
           flex-grow: 0; flex-shrink: 0; overflow: hidden; align-items: center;
           justify-content: center; width: 80px; height: 50px;">
    <div
           aria-hidden="true" data-text-as-pseudo-element="" style="position:
           relative; display: inline; flex-grow: 0; flex-shrink: 0; overflow:
           hidden; white-space: pre-wrap; overflow-wrap: break-word; height:
           20px; font-size: 20px; color: rgb(0, 120, 212); background-color:
           rgba(0, 0, 0, 0); font-family: SkypeAssets-Light; padding: 0px;
           cursor: inherit;"></div><div data-text-as-pseudo-element="Chats"
           style="position: relative; display: inline; flex-grow: 0;
           flex-shrink: 0; overflow: hidden; white-space: pre; text-overflow:
           ellipsis; font-size: 10px; color: rgb(0, 120, 212); font-family:
           &quot;SF Regular&quot;, &quot;Segoe System UI Regular&quot;,
           &quot;Segoe UI Regular&quot;, sans-serif; font-weight: 400;
           text-align: center; margin-top: 2px; align-self: stretch; cursor:
           inherit;"></div><div role="none" aria-hidden="true" style="position:
           absolute; display: flex; flex-direction: column; flex-grow: 0;
           flex-shrink: 0; overflow: visible; align-items: center; height: 24px;
           width: 30px; top: 0px; right: 12px; justify-content: center;">
    <div
           role="none" style="position: relative; display: flex; flex-direction:
           column; flex-grow: 0; flex-shrink: 0; overflow: hidden; align-items:
           center; justify-content: center; height: 20px; min-width: 20px;
           border-radius: 10px; background-color: rgb(244, 67, 54);
           padding-left: 4px; padding-right: 4px; width: 20px; border-color:
           rgb(240, 244, 248); border-width: 2px; border-style: solid;">
    <div
           data-text-as-pseudo-element="1" style="position: relative; display:
           inline; flex-grow: 0; flex-shrink: 0; overflow: hidden; white-space:
           pre; text-overflow: ellipsis; color: rgb(255, 255, 255); font-size:
           10px; line-height: 10px; text-align: center; background-color:
           rgba(0, 0, 0, 0); font-family: &quot;SF Bold&quot;, &quot;Segoe
           System UI Bold&quot;, &quot;Segoe UI Bold&quot;, sans-serif;
           font-weight: 400; cursor: inherit;">
    </div>
    </div>
    </div>
    </div>
    </button>

Any suggestion ?

Thanks in Advance !!

Answer 1

I have prepared a working example. Unfortunately, this code is not working in IE11. To make it work in IE11, CSS has to be adjusted.

Example is based on solution from here: Link

The main point is that from example over the link: you indicate, how many notifcations do you have over the attribute 'data-count':

<button class="notification-button" data-count="5"></button>

To make it dynamic in angularjs, you have to bind this attribute with scope varialbe using ng-attr-* directive

<button class="notification-button" ng-attr-data-count="{{counter}}"></button>

AngularJS docs gn-attr-*

When to use ng-attr?

angular
  .module('myApp', [])
  .controller('myCtrl', myCtrl);

myCtrl.inject = ['$scope'];

function myCtrl($scope) {
  $scope.counter = 0;

  $scope.increment = function() {
    $scope.counter++;
  }
}

.notification-button {
  background: linear-gradient(to bottom, rgba(37, 130, 188, 1) 0%, rgba(41, 137, 216, 1) 32%, rgba(41, 137, 216, 1) 42%, rgba(175, 224, 234, 1) 100%);
  width: 60px;
  height: 60px;
  border-radius: 10px;
  border: none;
  margin-top: 40px;
  margin-left: 40px;
  position: relative;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

.notification-button:before {
  content: attr(data-count);
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  display: block;
  border-radius: 50%;
  background: rgb(67, 151, 232);
  border: 1px solid #FFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  color: #FFF;
  position: absolute;
  top: -7px;
  left: -7px;
}

.notification-button.badge-top-right:before {
  left: auto;
  right: -7px;
}

.notification-button.badge-bottom-right:before {
  left: auto;
  top: auto;
  right: -7px;
  bottom: -7px;
}

.notification-button.badge-bottom-left:before {
  top: auto;
  bottom: -7px;
}

<!DOCTYPE html>
<html lang="en" ng-app="myApp" ng-controller="myCtrl">

<head>
  <meta charset="UTF-8">
  <title>Test</title>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
</head>

<body>

  <button ng-click="increment();">Increment</button>

  <div>
    {{counter}}
  </div>

  <button class="notification-button" ng-attr-data-count="{{counter}}"></button>


</body>

</html>