Enable Loose coupling in Angular using Pipes

With applications complexity increases, thus the code complexity too. 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 text to the input provided.

this.heightofPerson = data.heightInput + 'CM';

HTML part will look like,

<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 get the value, process them and return 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 }} </span>

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