Как сделать базовое перетаскивание в угловых JS

Question

у меня есть code for basic drag and drop.используя allow drop (), drag (ev) и drop (ev).

Я планирую сделать то же самое в angular js.так что мой spa будет работать нормально ..

Как построить фундаментную структуру для перетаскивания угловых js.

я пытаюсь обновить себя до фреймворков..У меня есть basic знание угловых js.

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}

#div1 {
    width: 350px;
    height: 70px;
    padding: 10px;
    border: 1px solid #aaaaaa;

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img id="drag1" src="https://picsum.photos/200/300?image=0" draggable="true"
ondragstart="drag(event)" width="300" height="69">