title: Dynamically add elements to the editable div with Angular and ANYWHERE
body: <p>So, I am creating an HTML interface where user should be able to write a text and push it as a notification to our mobile app.</p>
  <p>I am facing some troubleshoots with the text and the dynamic inserted elements using Angular 5;</p>
  <p>The text can contain special elements like: phone number, Location and website URL. Those special elements will be inserted by pressing on a button that opens a dialog, and for each one its specific fields are displayed, like google maps for location and input fields for Web URL and mobile Phone. It is implemented this way in order to capture longitude, latitude and phone numbers on save button in order to add them as buttons to the received push on the devices.</p>
  <p>Anyway, the above is implemented and could work successfully except the way of adding dynamically spans of special elements inside the div of the web interface. Spans added must have a class and a click event to display again the dialog in order to modify the data. Also they can be inserted anywhere inside the big div depending on user's choice.</p>
  <p>Below is the image of above description. <a href="https://i.stack.imgur.com/Ch1kS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ch1kS.png" alt="enter image description here" /></a></p>
  <p>The blue spans, are the ones that should be added dynamically inside the content editable div that can be filled by around 450 characters.</p>
  <p>So how to solve the issue and enable the feature of adding clickable and designed spans with icons inside a content editable div, and be able in a final stage to retrieve data?</p>
  <p>My code is the below, working but for a specific/predefined position:</p>
  <p><strong>Message.html</strong></p>
  <pre><code>      &lt;div id=&quot;myMessage&quot; contenteditable=&quot;true&quot; dir=&quot;ltr&quot; [innerHTML]=&quot;contentEN | safeHtml&quot; 
        style=&quot; height: 80px;border: 1px solid #c1c1c1; padding: 7px;&quot;&gt;
        &lt;/div&gt;
        
        &lt;ng-container  #vc&gt;           
        &lt;/ng-container&gt;
  </code></pre>
  <p><strong>Message.ts</strong></p>
  <pre><code>      @ViewChild('vc', {read: ViewContainerRef}) target: ViewContainerRef;
        
        createSpanPhone(spanIDNumber, phoneDescription, phoneValue ){
        
            // here the span Phone is created dynamically outside the div
            let phoneComponent = this.cfr.resolveComponentFactory(PhoneComponent);
            this.componentRef = this.target.createComponent(phoneComponent);
        }
  </code></pre>
  <p><strong>PhoneComponent.ts</strong></p>
  <pre><code>    import { Component } from '@angular/core';
      import { faPhone } from '@fortawesome/free-solid-svg-icons';
  
      @Component({
         selector: 'my-phone',
         template: '&lt;span contenteditable=&quot;false&quot; (click) = &quot;test()&quot; class=&quot;BAN_Tags_IN_Text&quot;&gt; &lt;fa-icon 
                    [icon]=&quot;faPhone&quot; class=&quot;faSpanIcon&quot;&gt; &lt;/fa-icon&gt; &lt;span class=&quot;phoneDesc&quot; 
                    data-attr=&quot;EN&quot;&gt;hello&lt;/span&gt; &lt;span class=&quot;phoneVal&quot; &gt;&lt;b&gt;12346&lt;/b&gt;&lt;/span&gt;
                     &lt;/span&gt;'
        })
  
     export class PhoneComponent  {
        faPhone = faPhone; // trying the icon
  
        constructor(){    
        }
  
       test(){
         console.log(&quot;Hiiii&quot;); // trying the click event
       }
     }  
  </code></pre>
  <p>The ViewContainerRef is filled successfully but I need to fill spans in the div above (id=myMessage) and not in a predefined position.</p>