ng-class-dynamicaly.component.html

<div class="role-badge" [ngClass]="{
  'green': user.role === 'ADMIN',
	'blue': user.role === 'MODERATOR',
	'black': user.role === 'MEMBER'
}">{{ user.role }}</div>

ng-class-dynamicaly.component.scss

.role-badge {
    background-color: #000;
    border-radius: 4px;
    color: white;
    font-size: 0.75rem;
    margin-top: 5px;
    font-weight: 400;
    padding: 2px 5px;
    display: flex;
    flex-wrap: wrap;

    a {
      text-decoration: none;
      color: #000;
    }

    a:hover {
      text-decoration: underline;
    }

    .reader-links {
      padding-right: 10px;
    }
  }

.green {
    background-color: green;
}

.blue {
    background-color: blue;
}

.black {
    background-color: black;
}