For my webpage, I am attempting to adjust the position of all images that are displayed. Despite trying to change the position of a single image using the DOM method, I have run into a problem where the position does not update as expected. Although the console confirms that the position is being updated, the actual image does not shift. While I can manipulate the image's width by directly accessing it through the 'image' element variable, the same approach doesn't work for positioning.
HTML
<div *ngIf='this.imagesPerRow'>
<div *ngFor="let image of images; let i = index; let last = last">
{{last ? setPosition() : ''}}
<img id={{i}} [style.width.%]="width" src={{image.src}} alt="">
</div>
</div>
CSS
* {
margin: 0;
padding: 0;
border: 0;
}
img {
display: block;
}
TypeScript
setPosition() {
const image: HTMLElement = document.getElementById('1');
if (image) {
console.log("Updating position");
image.style.left = "100px";
}
}