Чтобы отобразить метку разными цветами в зависимости от значения в Angular и Bootstrap, вы можете использовать различные методы. Вот несколько подходов:

1. Использование директивы ngClass. Вы можете использовать директиву ngClass в Angular для условного применения классов CSS на основе значения. Сначала определите разные классы CSS с разными цветами в таблице стилей вашего компонента. Затем привяжите директиву ngClass к значению и установите соответствующий класс в зависимости от условия. Например:

<span [ngClass]="{'label-red': value === 'red', 'label-blue': value === 'blue'}">{{ value }}</span>

2. Использование директивы ngStyle. Директива ngStyle позволяет динамически применять встроенные стили CSS в зависимости от значения. Определите разные стили для разных цветов в коде вашего компонента и привяжите директиву ngStyle к значению, чтобы установить соответствующий стиль. Например:

<span [ngStyle]="{'color': value === 'red' ? 'red' : 'blue'}">{{ value }}</span>

3. Использование пользовательского канала: вы можете создать собственный канал в Angular, чтобы преобразовать значение в зависимости от условия и вернуть соответствующий класс или стиль CSS. Сначала сгенерируйте новый канал с помощью Angular CLI (ng генерировать канал) и реализуйте логику в методе transform. Затем используйте канал в шаблоне для преобразования значения. Например:

<span [class]="value | colorPipe">{{ value }}</span>

Это лишь несколько методов достижения желаемого результата. Конкретный подход, который вы выберете, зависит от требований вашего проекта и стиля кодирования.