How to implement text area where existing value cannot be changed?-CodePudding

I have one Angular application where I want to implement a text area. In that text area, there will be some existing value (can be anything) that cannot be modified or removed. But users can add new values after the existing one and that new value can be modified or removed.
How can I implement a text area like this?
Example:

Thank you.

CodePudding user response：

You can create a component like this and pass the fixed text. Try like this:

HTML:

<div >
  <span id="fixedText">Fixed text</span>
  <textarea style="padding-top:{{ fixedTextHeight }}px" 
  (change)="onValueChange($event)"></textarea>
</div>

TS:

  fixedTextHeight ;

  constructor(private cd: ChangeDetectorRef) {  }

  ngAfterViewInit() {
    var el = document.getElementById('fixedText');

    var elHeight =
      el.clientHeight || el.offsetHeight || el.getBoundingClientRect().height;

    this.fixedTextHeight = elHeight   5;
    console.log('Height: '   this.fixedTextHeight);

    this.cd.detectChanges();
  }

 onValueChange(evt) {
    this.modifiedText = this.myText   ' '   evt.target.value;
 }

CSS:

.custom-editor {
  display: inline-block;
  position: relative;
}

.custom-editor span {
  position: absolute;
  left: 5px;
  top: 3px;
  color:gray
}

Working Demo

CodePudding user response：

I suggest to search more on here, or on internet. The bellow page can be useful:

Disable part of textarea content

So, to be found here (use contenteditable on a span):

    <div>
      Nulla quis lorem ut libero malesuada feugiat. <span contenteditable="true"></span>
    </div>

The dummy text will be added with your specific Angular sintex etc.