Как использовать событие курсора в Angular?

Вы можете использовать событие mouseenter и mouseleave в теге абзаца.

Проверьте это Stackblitz

Вы должны использовать процентный канал или десятичный канал для форматирования вашего числа:

<p class = "amount">
    <span class = "short">{{amount.total | percent:'1.2-2'}}</span>
    <span class = "long">{{amount.total | percent:'1.8-8'}}</span>
</p>

И используйте CSS, чтобы скрыть/показать их:

.amount .long {
    display: none;
}
.amount .short{
    display: block;
}
.amount:hover .long {
    display: block;
}
.amount:hover .short{
    display: none;
}

(или что-то в этом роде, я не тестировал этот точный код)

Вы близки... вы можете использовать mouseenter и mouseleave в своем HTML-шаблоне

Именно так:

<p (mouseenter) = "mouseEntered = true" (mouseleave) = "mouseEntered = false">
  {{ mouseEntered ? amount : amount.toFixed(2) }}%
</p>

Убедитесь, что вы определили свои переменные в своем компоненте .ts как таковые:

mouseEntered = false;
amount = 129.2445131545; 

Примечание. Я думаю, что лучше рассматривать amount как число, а не как строку. Знак процента можно добавить в HTML после фигурных скобок в элементе <p>, как я сделал в HTML выше.