Angular 2 change position of element

Question

In a component template I have an image. Dependent on a boolean I want to place another image on top of it. The end result looks something like this:

The second image is the green selector image. In order to do so, I need to place the selector image dependent on the dimensions of the main title image. ETA: Some images are higher than wide whereas others are wider then high. The top offset of the selector image is therefor dependent on the actual height of the title image.

I have an event handler for the load event of the images and when both are loaded I want to do the positioning. Both images are available in the component via @ViewChild. I tried to set the offsetTop and offsetLeft properties of the nativeElement but they are read-only. I have verified that I have both images in my load handler with the correct dimensions.

How can I do that in either the template itself or in my load handler?

Answer 1

In case somebody else needs a solution for a similar problem:

I compute top and left position (based on the title image) in the load handler and in the template on the select image I added something like [style.top]="top" [style.left]="left" (where top and left are strings ending with "px").