Ion-buttons with badges for IONIC 4

Ionic Framework
7 
     <ion-button fill="clear" expand="block" (click)="clickNoti()" [routerLink]="['/notifications']">
        <ion-badge [class.badge-one]="notifications < 10" [class.badge-two]="notifications >= 10" color="danger" *ngIf="notifications > 0">{{ notifications }}</ion-badge>
        <ion-icon name="{{name}}" class="notification_Icon"></ion-icon>
      </ion-button>

        .badge-one {
          position: absolute;
          top: 3px;
          right: -1px;
          font-size: 0.8em;
          --padding-start: 5px;
          --padding-end: 5px;
          --padding-top: 5px;
          --padding-top: 5px;
         border-radius: 51%;
         z-index: 1;
         width: 22px;
         height: 22px;
        }
        
        .badge-two {
          position: absolute;
          top: 3px;
          right: -4px;
          font-size: 0.7em;
          --padding-start: 4px;
          --padding-end: 4px;
          border-radius: 40%;
          z-index: 1;

        }
````ts`

notifications: number = 3;