I am working on an Angular application and need to display a translated string that is sliced to a specific length. My supervisor prefers that all logic that related to view better to be implemented directly in the view (template), without modifying the component (controller) code.

attempted to chain the translate and slice pipes in the template, but it did not work as expected:
Here is the full code:

<span ng-if="vm.yaxis[vm.yaxis.length-1-yIndex].label.length > 10" class="y-label tooltipped" data-tooltip="{{vm.yaxis[vm.yaxis.length-1-yIndex].label | translate}}" data-position="bottom">{{(vm.yaxis[vm.yaxis.length-1-yIndex].label | translate) | slice: 0 : 8}}<span class="y-label-dots">...</span></span>

It actually checked the yaxis label length and if length is greater than 10 the label should be slice. but the problem is this will not show any label in the interface. it show as blank. if i do slice and translate then this not translate correctly since in the i18n translation files does not contain string that slice. therefore I need to apply the translate and then slice.