Применять cdkDragHandle только к заголовку в дочернем компоненте

Я хочу, чтобы компонент перетаскивания присутствовал в виде всплывающего окна, плавающего на экране, и пользователь мог перемещать всплывающее окно только путем перетаскивания заголовка. Однако cdkDrag применяется к родительскому компоненту. Таким образом, его все еще можно перемещать, перетаскивая за пределы заголовка.

app.comComponent.ts

<app-popup
    cdkDrag
    cdkDragBoundary = ".body-container"
    [cdkDragFreeDragPosition] = "{ x: -10, y: 0 }"
    [style.width] = "'150px'"
    [style.height] = "'150px'"
  >
  </app-popup>

приложение.компонент.css

app-popup {
  position: absolute;
  right: 20px;
  top: 0;
  z-index: 9999;
}

popup.comComponent.ts

<app-item></app-item>

item.comComponent.ts

<div class = "item">
  <div class = "item-header">Drag Here !</div>
  <div class = "item-content">Please no drag by here.</div>
</div>

элемент.компонент.css

.item-header {
  cursor: move;
  background-color: red;
  height: 30px;
  text-align: center;
}

Подскажите, пожалуйста, как применить cdkDragHandle только к заголовку. Спасибо.

StackBlitz - cdkDrag