Angular CSS - перемещение позиции текста на основе условия

Question

У меня есть стекблиц здесь - https://stackblitz.com/edit/angular-py9lmk?file=src%2Fapp%2Fapp.component.ts

Это простое угловое приложение с основным типом индикатора выполнения.

Сумма отображается в процентах от бара красным цветом счерный маркер и текст, отображающий сумму.

Текст расположен слева от черного маркера.

Я бы хотел сохранить текст в одну строку.

Когда сумма больше 50, я бы хотел, чтобы текст располагался справа от черного маркера - поэтому от 0-50 текст будет слева от маркера, а затем выше 50 он будет справачерного маркера

Я добавил левый и правый классы к маркеру, когда текст должен находиться слева или справа, но я не могу понять, как получить текст на правильной стороне черного маркера и сохранитьэто в правильном положении.

*{
  margin: 0;
  padding: 0;
}

.main{
  position: relative;
  width: 400px;
}

.bar{
  background: lightgrey;
  width: 100%;
  height: 10px;
}

.inner-bar{
  background: red;
  height: 10px;
}

.marker{
  border-left: 2px solid black;
  font-family: sans-serif;
  font-size: 12px;
  left: 40%;
  padding: 20px 0 0 5px;
  position: absolute;
  top: -5px;
}

/* .marker-left{
  border-right: 2px solid black;
}

.marker-right{
  border-left: 2px solid black;
} */

Answer 1

Этот код поможет:

[ngStyle]="{ 'left': data <= 50 ? data + '%' : 'auto', 'right': data > 50 ? 100 - data + '%' : 'auto' }"
[ngClass]="data <= 50 ? 'marker-right' : 'marker-left'"

Мы делаем это в 2 шага:

• Условно применяем свойство left или right с троичными операторами.
• Условно применять «маркерные» классы (слева или справа) с троичным оператором.

Вы можете увидеть анимированную демонстрацию здесь: https://stackblitz.com/edit/angular-t5v2xw

НЕ связывайте функции в вашем шаблоне, это может вызвать проблемы с производительностью, вы можете просто связать данные с вашей переменной data,Я перестроил ваш маленький проект без них.