I needed to make 2 transformations on my Angular template. The first transformation involved changing the direction of the arrow depending on whether the number was negative or positive. I achieved this using a custom Pipe.
The second transformation was to change the color of the number to red if it was negative, and green if it was positive.
Here is the custom Pipe I created for the arrows:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'topBar'
})
export class TopBarPipe implements PipeTransform {
transform(value: number): string {
if(value < 0){
return 'arrow_downward'
}
else if(value > 0){
return 'arrow_upward'
}
return ''
}
}
This is the HTML code calling the custom Pipe for the arrows:
<mat-icon>{{
qtdEvents.lastMonthMinusCurrentMonthQuantity | topBar
}}</mat-icon>
The arrow transformation worked successfully, but I am unsure how to tackle changing the color of the number based on its sign. Would I need to use a Pipe for this as well?