title: How to create draggable and editable list items using @angular/cdk?
body: <p>I'm trying to create a horizontal draggable list with items that should be editable. For that I'm using the cdk package without material and with the attribute  <code>[contentEditable]='true'</code>. But the items are not editable. How do I get it working?</p>
  
  <pre><code>&lt;div cdkDropList [cdkDropListOrientation]="'horizontal'" class="namingConventionDragDrop"
       (cdkDropListDropped)="drop($event)"&gt;
      &lt;ng-container *ngFor="let item of resultConvention; let i = index;"&gt;
          &lt;div cdkDrag class="pop naming-placeholder" *ngIf="item.type === 'placeholder'"&gt;
                  {{item.value}}
              &lt;fa-icon (click)="remove(i)" icon="times-circle"&gt;&lt;/fa-icon&gt;
          &lt;/div&gt;
          &lt;div cdkDrag class="pop" *ngIf="item.type === 'text'
             [contentEditable]="true" (click)="onItemClick($event)"&gt;
                  {{item.value}}
              &lt;fa-icon (click)="remove(i)" icon="times-circle"&gt;&lt;/fa-icon&gt;
          &lt;/div&gt;
          &lt;div class="pop deactivated" *ngIf="item.type === 'extension'"&gt;
              {{item.value}}
          &lt;/div&gt;
      &lt;/ng-container&gt;
  &lt;/div&gt;
  &lt;div class="naming-convention preview"&gt;
      &lt;span&gt;Preview:&lt;/span&gt;
      {{preview}}
  &lt;/div&gt;
  </code></pre>
  
  <p>Because I thought it has something to do with focus, I added a focus() call:</p>
  
  <pre><code>onItemClick(event) {
      event.target.focus();
  }
  </code></pre>
  
  <p>Preview of the frontend. The user should be able to edit items that are of type "text":</p>
  
  <p><a href="https://i.stack.imgur.com/prZde.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/prZde.png" alt="Preview of the frontend. The user should be able to drag &amp; drop items and to edit items of type &quot;text&quot; (e.g. the first one)"></a></p>