Как добавить нажимаемую кнопку внутри текстовой области angular

Question

Мне нужна кнопка, которая плавает в правом верхнем углу текстовой области в angular.

Это то, что у меня есть, но она не работает

<textarea matInput  matInput rows="15" cols="40" >
 <div (click)="formatXml()" class="xmlIcon">
     <span matTooltip="'Format Xml'" class="fas fa-search-plus ml-1" ></span>
   </div>           
 </textarea>

.xmlIcon{
    padding-right: 20px;  
    background-position: top right;
    background-repeat: no-repeat;
}

Answer 1

Html

<div class="textarea-container">
 <textarea name="foo">Some content here...</textarea>
 <button>Menu</button>
</div>

css

.textarea-container {
  position: relative;
 }
.textarea-container textarea {
 width: 100%;
 height: 100%;
 box-sizing: border-box;
}
.textarea-container button {
 position: absolute;
 top: 0;
 right: 0;
}

Live пример

Answer 2

Вы можете обернуть текстовую область и кнопку с элементом. Таким образом, вы можете позиционировать абсолютную кнопку в относительном «внешнем элементе».

.outer {
  position: relative;
  display: inline-block;
}

.xmlIcon {
  background-position: top right;
  background-repeat: no-repeat;
  background-color: red;
  position: absolute;
  top: 20px;
  right: 20px;
}

<div class="outer">
  <textarea matInput matInput rows="15" cols="40"></textarea>

  <div (click)="formatXml()" class="xmlIcon">
    <span matTooltip="'Format Xml'" class="fas fa-search-plus ml-1">button</span>
  </div>
</div>

Answer 3

вместо textarea, вы можете использовать span или любой вспомогательный элемент со свойством contenteditable. читать дальше

ex-

<div class="editable-area-wrapper">
    <button>Click</button>
    <span contenteditable="true">I'm editable</span>
</div>

код