Adding a dollar sign to an ion-input - input

Question

I currently have this:
<ion-item>
<ion-label sale floating>Sale Price< /ion-label>
<ion-input type="number" clearInput placeholder="$">< /ion-input>
</ion-item>
What I'd really like, is to add a $ to the front of any input so that when a user types in a number it appears with a dollar sign next to, or inside it. I'm finding this impossible currently. In a standard input I'd put the before or in a span or label preceding the input in order to make it work.
However with the Ion-item in an Ion-list it seems that adding a span breaks it, and I'm not sure how, using scss, to add it after. Head exploding stuff.
I've tried:
ion-label[sale]:before {
content: "$";
}
On a whim, in hopes that would work. It does not.
Anyone experience this before and have a solution?
Thanks

Answer 1

Interesting question. The following should work because in practice I believe an <ion-input> gets translated to a standard HTML5 input in the DOM.
input[type=number]:before {
content: "$";
}

Answer 2

This is a great question and #Lightbeard's answer should be sufficient for most use cases. I want to share an alternative solution for this using Angular Pipes
#Pipe({name: 'roundDollars'})
export class RoundDollarsPipe implements PipeTransform {
transform(value: any) {
return _.isNumber(value) ? "$"+Math.round(value) : 'Price Error';
}
}
#Pipe({name: 'roundCents'})
export class RoundCentsPipe implements PipeTransform {
transform(value: any) {
return _.isNumber(value) ? "$"+value.toFixed(2) : 'Price Error';
}
}
In the template, you can implement like this if you are using a form control:
<ion-item>
<ion-label sale floating>Sale Price< /ion-label>
<ion-input type="number" formControlName="salePrice" value="{{ formControl.get('salePrice').value | roundDollars }}">< /ion-input>
</ion-item>
This has the disadvantage that it will pre-pend a '$' to the actual value submitted in your form. I store my data as a number rather than a string, so I put the '$' character on a disabled input lower in the form to display the total of several inputs.
This means the actual input where the user is typing does not show a '$' but that appears lower in the form.
My production template looks like this:
<ion-item>
<ion-label floating>Monthly Total:</ion-label>
<ion-input [disabled]="true" class="invisible" type="number" formControlName="monthlyFee"></ion-input>
</ion-item>
<p class="offset-y-32">{{ detailsForm.get('monthlyFee').value | roundDollars }}</p>
My .invisible class simply sets opacity: 0 so you can still use the line from the ion-item, while .offset-y-32 moves the <p> text up 32 pixels.
Here is a screen shot of the form