Enable Loose coupling in Angular using Pipes

With applications complexity increases, thus the code complexity too. In order to achieve a minimal coupling, we can process a function as Pipe in Angular and achieve the same.

Consider the following example of attaching the a text to the input provided.

//This is ts file
....
this.heightofPerson = data.heightInput + 'CM';
....

In the corresponding html file, the data will be coded as

<div>
    <span> The height of the person is {{heightofPerson}}
    </span>
</div>

Here the variable heightOfPerson is tightly coupled with the string CM and it should be appended every time and should be re-written again when used somewhere. To avoid this , Pipes can be used.

Pipes:

Pipes are similar to functions which gets the value, process them and returns the same to the called method. But this can be achieved more independently in Pipes.

import {Pipe, PipeTransform} from '@angular/core';
@Pipe ({name:'heightPipe'})
export class stringAttachPipe implements PipeTransform {
        
      transform(height: number):string {
       return height +'CM';
}
}

The corresponding HTML part can be viewed as ,

<span> The height of the person is 
{{heightofPerson | heightPipe : heightInput }}

Here, the height has been passed as an argument to the pipe. Thus pipe helps in reduced coupling.