Reference it without a hash symbol and use renderer2 to edit styles/classes.
For details please check my stackblitz sample, this are the main changes:
constructor(private renderer: Renderer2) {}
ngOnInit() {
const degree = 90;
const image = document.getElementById('image');
this.renderer.setStyle(
image,
'transform',
`rotate(${degree}deg)`
)
}
I need to rotate an image in html from my component with
(document.querySelector('#image') as HTMLElement).style.transform = `rotate(${degree}deg)`;
or
document.getElementById('#image').style.transform = `rotate(${degree}deg)`;
and set an id to it here
<img id= "image" class="arrow" src = "assets/arrow.png"/>
but it crashes the page with this error
core.js:5882 ERROR TypeError: Cannot read property ‘style’ of null
How about adding a class whenever you need to rotate the element? class is predefined with rotate styles. Is it fulfill your requirement?
@SandyB the problem is i need to calculate the angle then update the image rotation inside the constructor of the component but it crashes
How about a stackblitz? Any chance you can set it up for reproducing the issue
@SandyB i’m asking is the above code is correct or not ? i searched a lot it’s strange how there is no someone to know the problem the image exists inside the html and it do rotate when i set the style inside the html but can’t from the component
@sheko you have to import it from
@sheko please take a look at the stackblitz, it is working…