Can I use a custom built Angular component as a placeholder for an Input field

Question

I'm new to Angular. I'm working on a project. I have created a custom month-picker component in Angular 6 from the scratch (*because I'm not allowed to outsource any 3rd party library not even bootstrap, fontawesome or primeng) and for that I want a simple text field inside which I want to show a simple calendar icon. I tried few solutions. This is most relevant but they are using AngularJS. This is also somewhat different. This is also not very useful. Here is my code. I also created a CodePen.

timeselector.component.html

<our-icon class="icon-our-calendar"></our-icon>
<input class="input-field" type="text">

Note: <our-icon> is my organisation's own library of icons. I'm not allowed to go beyond that.

I was trying this on CodePen but using some hex code for the icon. Is there anyway I can add our-icon tag as a placeholder to the input field like this:

<input class="input-field" type="text" placeholder="<our-icon class="icon-our-calendar"></our-icon>">

I know this is completely wrong but just wanted to give you an idea what I actually mean.

But first I want to ask is it even doable or I'm simply wasting everyone's time. Please give me some direction.

So you need to implement month picker which will have icon from your organization library, right? — Plochie, Dec 08 '19 at 16:49
@Plochie, Yes, exactly. I also asked for hex code of their calendar icon but they say no you do it using tag only. :-( — Tanzeel, Dec 08 '19 at 16:51
So in input field you want to show some icon? icon from library — Plochie, Dec 08 '19 at 16:52
@Plochie. Yes. You got it right. That icon is available to me only in the form of a tag. It would be much easier it was a hex code. — Tanzeel, Dec 08 '19 at 16:53

score 2 · Accepted Answer · answered Dec 08 '19 at 18:08

This is just a css problem. Treat icon and input as different elements rather than incorporating with each other.

Make position: absolute for icon and apply padding according to size of icon so that input start after the icon.

CSS

input {
    width: 450px;
    padding: 5px 35px;
    height: 25px;
}

.input-wrapper {
  position: relative;
}

.input-wrapper .input-icon {
  position: absolute;
  padding: 12px;
}

Template

<div class="input-wrapper">
  <app-our-icon class="input-icon"></app-our-icon>
  <input>
</div>

Demo.

Can I use a custom built Angular component as a placeholder for an Input field

1 Answers1