Ggtcf

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 !!

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>