Within my angular application, I am retrieving a list of addresses from a service that provides an object structured like this:
{
Flat: "10B",
BuildingName: "Some Building",
Line: "10B Some Building Road Town POST CODE",
Postcode: "POST CODE",
Street: "Road",
Town: "Town"
}
After passing this data into the controller, the goal is to display the address as a single line separated by commas. To achieve this, I utilize a filter to insert the commas (as the Line value does not contain them). The final rendering in the html would be formatted like so:
<a>{{ address.Flat | joinBy: ',' }} {{ address.BuildingName | joinBy: ',' }} {{ address.BuildingNumber }} etc...</a>
If any expression within the displayed address is empty (such as the absence of a building name), it will not be visible on the user interface. However, the page source will still retain an extra whitespace where the empty expression exists.
Upon inspecting the <a> element, apparent there is no additional whitespace present in its outerHTML, innerHTML, innerText, or text content.
The spaces between expressions in the html are retained even when one of them is empty. Is there a method in Angular to remove this whitespace from the page source, or should I resort to using vanilla JavaScript along with regex to accomplish this task?