CODEWITHSUNDEEP
htmlangularwebrotation
sheko
sheko

Reputation: 556

Rotate an image in Angular 9

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

Upvotes: 1

Views: 6841

Answers (1)

nll_ptr
nll_ptr

Reputation: 881

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)`
    )
  }

Upvotes: 1

Related Questions