0

I need to add a badge to the icon on my project that displays the count number values, i cant seem to make the badge work. Can anyone help me with this? and make the badge display the count value on the icon.

<div class="actions-bar" fxLayout="row" fxLayoutAlign="end center">
<label *ngIf="_dataSource.data.length > 0" class="mr-8">
<mat-icon class="mat-18 tick-icon">navigation</mat-icon>
<span>{{_dataSource.data.length}} locations</span>
</label>
<label *ngIf="_dataSource.data.length > 0" class="mr-8">
<mat-icon class="mat-18 warning-icon">warning</mat-icon>
<span>{{countWarningAddress()}} locations</span>
</label>
<label *ngIf="_dataSource.data.length > 0" class="mr-8">
<mat-icon matBadge="" matBadgeColor="accent" class="mat-18 tick- 
icon">check_circle</mat-icon>
<span>{{countValidAddress()}} locations</span>
</label>
<label *ngIf="_dataSource.data.length > 0" class="mr-8">
<mat-icon class="mat-18 flag-icon">flag</mat-icon>
<span>{{countInvalidAddress()}} locations</span>
</label>
SoberdogK9
  • 127
  • 12
  • Ok before we go deep, have you tested if the methods such as `countWarningAddress()` are working? – wentjun Apr 10 '19 at 06:37
  • yes they are working. I'm doing this exercise where i need to add a badge to it to make it look nicer. – SoberdogK9 Apr 10 '19 at 06:46
  • Hmmm.. Ok, right now, since the methods are working, I presume they are just displaying the number count, right? And I guess you need help with styling the badges? – wentjun Apr 10 '19 at 06:51
  • yes correct, they are displaying the counts beside the icons, so now i need to add badges to the icons displaying the counts as well. – SoberdogK9 Apr 10 '19 at 06:54

1 Answers1

0

If you are talking about hybrid mobile app badge then you can add plugin https://www.npmjs.com/package/cordova-plugin-badge for badge and use

cordova.plugins.notification.badge.set(count);

Sandeep
  • 131
  • 1
  • 10