1

Here's my html file. I want to add ₹ prefix to my input field. I'm working on an angular project and using botstrap for html pages. product.component.html

<form>
    <div class="form-group">
        <label for="title">Title</label>
        <input id="title" type="text" class="form-control">
    </div>
    <div class="form-group">
            <label for="price">Price</label>   <==Want to add here
            <input id="price" type="number" class="form-control">
    </div>
    <div class="form-group">
            <label for="category">Category</label>
            <select id="category"class="form-control">
                <option value=""></option>
            </select>
    </div>
    <div class="form-group">
            <label for="imageUrl">Image Url</label>
            <input id="imageUrl" type="text" class="form-control">
    </div>
    <button class="btn btn-primary">Save</button>
</form>
Akber Iqbal
  • 14,487
  • 12
  • 48
  • 70
Deepak
  • 89
  • 8
  • Hope this will help solve you the problem. https://stackoverflow.com/questions/15899472/currency-codes-in-twitter-bootstrap-icons-or-ascii-codes – stud3nt Nov 19 '19 at 12:12
  • you want this symbol to appear after the user enters a number or be there at all times? – Akber Iqbal Nov 20 '19 at 08:14

1 Answers1

3

I guess you're looking for this.

enter image description here

Use input-group class to prepend and append text/icon.

Code:

<div class="form-group">
    <label for="price">Price</label>
    <div class="input-group">
        <div class="input-group-prepend">
            <div class="input-group-text">₹</div>
        </div> 
        <input id="price" type="number" class="form-control">
    </div>
</div>

Reference

Bootstrap 4 Input group

hbamithkumara
  • 2,344
  • 1
  • 17
  • 17