Difference in values, display a plus or minus - html

Question

I have a simple subtraction of two values in a table, shown below. In most cases the new value is less than the old value, however in some cases when new stock is added, the new value will be higher than the old. Is there a way to show a '+' or '-' beside the 'Difference' label depending on what the change has been.
Thanks in advance!
<tr *ngFor="let change of stockChanges">
<td scope="row">
{{change.oldValue}}
<div class="stockLabel">
Old
</div>
</td>
<td>
{{change.newValue}}
<div class="stockLabel">
New
</div>
</td>
<td>
({{change.newValue - change.oldValue}})
<div class="stockLabel">
Difference
</div>
</td>
</tr>

Answer 1

<tr *ngFor="let change of documentaryList">
<td scope="row">
{{change.oldValue}}
<div class="stockLabel">
Old
</div>
</td>
<td>
{{change.newValue}}
<div class="stockLabel">
New
</div>
</td>
<td>
({{(change.newValue - change.oldValue) >= 0 ? (change.newValue - change.oldValue) : -(change.newValue - change.oldValue)}}
{{change.newValue > change.oldValue ? '+' : '-'}}
)
<div class="stockLabel">
Difference
</div>
</td>
</tr>

Answer 2

You could implement signedNumber pipe:
#Pipe({
name: 'signedNumber',
})
export class SignedNumberPipe implements PipeTransform {
constructor(private format: NumberFormatService) {}
transform(value: number, digitsInfo?: string): string | null {
if (value === null || value === undefined) {
return null;
} else {
return this.sign(value) + this.format.format(value, digitsInfo);
}
}
sign(v: number) {
return v > 0 ? '+' : '';
}
}
Then use it in template:
<td>
({{(change.newValue - change.oldValue) | signedNumber:'1.0-2'}})
<div class="stockLabel">
Difference
</div>
</td>
The "1.0-2" is the format also used by Angular's standard number pipe.