Angular typescript - how to remove space in between words in component.html

Question

In my component.html I have a img tag, the image source value comes form an array. The array consists of a property called name. The name can be two or 3 words with white spaces in between the words. How to set the the image src to the "name" property of the array, without the white spaces in between the words.

Array - item[0] : 
{
description: "fruits",
name: "Apple orange pear",
age: "30"
}


HTML :
 <img [src]="item.name" [alt]="item.description"> ---- here the item.name if it has any whitespaces in between should be removed. 

How to achieve this in the component.html template itself ?

Answer 1

Since @Andrei Tatar didn't post an answer with an example on how it can be done with a pipe, I put this together to show how easy it is to manipulate data with pipes.

@Pipe({
  name: "trimWhitespace"
})
export class TrimWhitespacePipe implements PipeTransform {
  transform(value: string): string {
    return value.replace(/\s/g,'')
  }
}

and use it with <img [src]="item.name | trimWhitespace"