Search code examples
jqueryangularstringtypescriptstring-interpolation

Angular 7 - multiline strings on tooltip

I have created multi line string using Template strings.

toolTip = `
      ${Test}  : ${number}
      ${Test}  : ${number}
      ${Test}  : ${number}
      ${Test}  : ${number}
      ${Test}  : ${number}}`;

This multi line string I'm showing on tooltip of button , however, extra spaces are getting added from the second line e.g I'm getting output like below

Test string : 123
  Test string2 : 234
  Test string3 : 234

Is there any way to make them aligned properly?

Solution

  • That's because theres a bunch of random spaces in your string

    Try

    toolTip =`${'string'}  : ${123}
${'string'}  : ${123}
${'string'}  : ${123}
${'string'}  : ${123}
${'string'}  : ${123}`;

    https://stackblitz.com/edit/angular-ivy-9szvet?file=src/app/app.component.ts