How to truncate text elements conditionally in Angular?

In my Angular component I have a text consisting of two values. In my template:

 <svg-icon [name]="someName" class="d-inline-block"></svg-icon>

 <strong class="any">
    {{ program.name }}
    <span class="pcr">{{ program.pcr }}</span>
 </strong>

What I want to do is to truncate the text with the elipsis (...) but in a special way.

When there's lack of space for the whole text to display, I want to initially truncate the program.name. Resizing the screen to smaller, the text can be shortened until it has no less than 5 characters (excluding ellipsis). If there is still not enough space I want to truncate the program.prc.

I tried to make a directive using Hostbinding but I have no idea how to approach the logic. Maybe there's kind of ready solution for similar problems? Anybody could help?