3

Hi I have an angular 2 template code like below:

            <td>
                <a href="#">
                    {{row.test[0].size}}
                    {{row.test[0].length}}
                    {{row.test[0].width}}
                </a>
            </td>

But when the project loads in browser am getting a space between these values. Which i dont want. How can I solve this issue? Any idea guys? Do I need to use any pipe or something? Thanks in advance.

blackdaemon
  • 755
  • 5
  • 19
  • 44
  • 2
    the carriage return is going to create a hidden space in the HTML; if you want them all strung together without spaces, then they all need to be on the same line in the markup. – Claies May 26 '17 at 00:47

2 Answers2

0

It would be nice if you could interpolate directly in the template, but since you cannot, then create a "getter" in your component like this:

get combined() {
  return `${this.row.test[0].size}${this.row.test[0].length}${this.row.test[0].width}`;
}

And use in your template like this:

{{ combined }}

Or for a more "dynamic" approach as a method:

getCombined(currRow) {
 return `${currRow.test[0].size}${currRow.test[0].length}${currRow.test[0].width}`;
}

And use in the template, passing in the current value:

{{ getCombined(row) }}

Then it appears as just one string.

See also : https://github.com/angular/angular/issues/7558 which is the issue related to the interpolation not parsing in templates.

And also on this question, for another example on the issue.

Neil Lunn
  • 148,042
  • 36
  • 346
  • 317
  • `Error: Uncaught (in promise): Error: Template parse errors:↵Parser Error: Unexpected token Lexer Error: Unexpected character [`] at column 2 in expression [ `${row.....` – blackdaemon May 26 '17 at 02:06
  • @blackdaemon Right you are. That's annoying that the ES6 template will not parse directly. Amended the answer and actually tested to use a "getter" on the component instead. Funny thing is I walked away after issuing the original answer but started thinking it would at least be "cleaner" to demonstrate the getter. Turns out it's really the **only** way to do it. – Neil Lunn May 26 '17 at 02:25
  • But neil, the problem is am getting the data only in my template through ngFor. – blackdaemon May 26 '17 at 03:03
  • @blackdaemon Not stated in your question. The basic principle remains. So using with an `*ngFor` you create a method on the component and pass in the current value as an argument. Again posted the example. You probably don''t want the array indexes if you are iterating, but again this detail is not in your question as asked. I hope you understand this now. – Neil Lunn May 26 '17 at 03:09
  • @blackdaemon The summary of this is basically *"Do the interpolation in the component"* and then use either the method or exposed property in the component in your template. – Neil Lunn May 26 '17 at 03:11
0

You can make it one interpolation:

            <td>
                <a href="#">
                    {{row.test[0].size +
                      row.test[0].length +
                      row.test[0].width}}
                </a>
            </td>
Dominik Brázdil
  • 319
  • 2
  • 7