Pipe isn't returning the right values

Question

I have a pipe that is supposed to add the sub totals together to return the grand total but it just returns the sub total. It returns sub_total = product_price * quantity; and not the sum of the sub totals.

This is my pipe:

@Pipe({
name: 'grandtotal'
})

export class GrandTotalPipe implements PipeTransform {
transform(product_price: number, quantity: number) {
var totals = [];
var sub_total;
sub_total = product_price * quantity;
totals.push(sub_total);
var i;
var grand_total = 0;
for (i = 0; i < totals.length; i++) {
grand_total += totals[i];
}
return grand_total;
}
}

This is how I call the pipe in the HTML:

<div>Grand Total {{ product_price | grandtotal: quantity : sub_total : grand_total : totals }}</div>

 

When I remove "var totals = [];", I get "cannot read property push of undefined." When I just use "var totals;", I get "Subsequent variable declarations must have the same type. Variable 'totals' must be of type 'any[]', but here has type 'any'."

I've tried putting "var totals = [];" everywhere. I've tried putting it before the transform function and I've tried putting it in the component. It can't go anywhere except where it is now but that's leading to my issue so that's no good.