I'm trying to create movable windows in Angular 7. To do this, I have an absolutely positioned div that windows will go inside of. I have an app-window-toolbar component and an app-window-container component. When the toolbar is dragged, I want to change the top and left CSS attributes of the app-window-container component. The app-window-toolbar component is a child of the app-window-container component.

app.component.html

```
<app-window-container *ngFor="let window of windows">
    <app-window-toolbar>
    </app-window-toolbar>
    <div>Window content here</div>
</app-window-container>

```

window-toolbar.component.ts

```
@Component({
    selector: "app-window-toolbar",
    templateUrl: "./window-toolbar.component.html",
    styleUrls: ["./window-toolbar.component.scss"]
})
export class WindowToolbarComponent implements OnInit {

    moving = false

    constructor(private elRef: ElementRef) { }

    ngOnInit() {
    }

    startMove() {
        this.moving = true
    }

    @HostListener("document:mousemove", ["$event"])
    move(event: MouseEvent) {
        if (this.moving) {
            // Here I'm trying to access the parent element to set it's
            // CSS properties. The mouse y position is being logged
            // successfully, but the parent elements style is not being set. 
            console.log("mouse y: " + event.clientY)
            this.elRef.nativeElement.parentElement.style.top = event.clientY
            this.elRef.nativeElement.parentElement.style.left = event.clientX
        }
    }

    @HostListener("document:mouseup")
    stopMove() {
        this.moving = false
    }

```

}

window-toolbar.component.html

```
<div style="height: 100%; display: flex" (mousedown)="startMove()">
    <div style="flex-grow: 1">
        <ng-content></ng-content>
    </div>
    <div style="height: 100%">
        <i class="material-icons md-light close-window-icon">close</i>
    </div>
</div>

```

I'm not sure where I'm going wrong here. I'm also looking for feedback on whether this is the best way of doing this? From what I've read this style of DOM manipulation seems to be frowned upon, but I'm not sure I have much of choice to implement this feature. The only other thing I can think of doing is emitting events when the toolbar is dragged, and have the container listen to those events. Not sure how great the performance would be though.