Insert additional text after the subText.

[mota57]

I was trying to insert text after the property "subText.text". In this case you can see that the value of this property is 'restantes' but if I want to add additional text that will not move and will stick to it, no matter the screen size I had to write a directive as follows. My question here...is there any standard way to do this?

I had the jsfiddle that shows that it works !! but is not a testable. I hope you guys let me know if my question is wrong and if it is please provide proper feedback.

export function KnobFormat($injector: any): angular.IDirective {

    return {
        restrict: 'A',
        link: function(scope: any, element: any, attrs: any){

            var svg = element.find('svg')[0];
            var $jq = angular.element; 
            var rows = $jq(element).find('text');
            var $filter = $injector.get('$filter')('filter');

            let pattern = {id: ''};
            var elements = $filter(rows, pattern, (a: any, e: any) => {  return (a !== 'text') ? true : false; });

            $jq(elements).css('font-size', '14px');
            $jq(elements).css('dominant-baseline', 'central');



            var text = svg.getElementsByClassName('sub-text')[0];
           

            var transform =  text.getAttribute('transform');
            var index1 = transform.indexOf('(') + 1;
            var index2 = transform.indexOf(')');
            var vals = transform.substring(index1, index2).split(',').map((n: string) => { return parseInt(n); });
            var x = vals[0];
            var y = vals[1] + 18;
            
            var newElement = document.createElementNS('http://www.w3.org/2000/svg', 'text');
            newElement.setAttribute('id', 'knob-text');
            newElement.setAttribute('class', 'sub-text');
            newElement.setAttribute('text-anchor', 'middle');
            newElement.setAttribute('font-size', 'bold italic large serifpx');

            var translate = 'translate(' + x + ',' + y + ')';
            newElement.setAttribute('transform', translate);
            newElement.style.fontSize = '12px';
            newElement.style.dominantBaseline = 'central';

            newElement.textContent = attrs.note;

            text.insertAdjacentElement('afterend', newElement);
        }
    };
}