我可以使用自定义构建的 Angular 组件作为输入字段的占位符吗

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.

Answer 1

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.