Angular ngStyle inside img tag not updating dynamically

Question

With this template

  <img  src="{{someDynamicImageSrcVar}}" 
  (load)="onImageLoad($event)"
  [ngStyle]="getImageStyle()"                
  >

After the image is changed and loads, onImageLoad() updates some properties.

getImageStyle() {
  const style = {
    'width.px': this.naturalWidth,
    'height.px': this.naturalHeight
  };
  console.log(style);
  return style;
}

The framework calls getImageStyle() which returns a style like

{width: "500px", height: "400px"}

However, the DOM is not updated apart from the first time getImageStyle() was called.

The style never changes from the initial values.

What should I do to make the style update?

do you have `changeDetection: ChangeDetectionStrategy.OnPush` on your component? — Ludevik, Jun 27 '19 at 09:48
well, that may be the cause that it is not rerendered, try removing it and observe — Ludevik, Jun 27 '19 at 12:57
I removed that line and it had no effect. I can see the src update in the div, but the style is unchanged. I can see a correct style being printed in the console. I also tried cdr.detectChanges() inside the onImageLoad function. — intotecho, Jun 27 '19 at 13:24

score 1 · Answer 1 · answered Jun 27 '19 at 09:57

1

The syntax for ngStyle is this

[ngStyle]="{'width.px':500, 'height.px': 500}"

So change your return object to this structure

{ 'width.px' : 500, 'height.px' : 500}

answered Jun 27 '19 at 09:57

Akash Srivastav

756
5
15

Good suggestion. I tried it but it had no effect. Now the style returned is {width.px: 400, height.px: 300}. But the element is not updated. – intotecho Jun 27 '19 at 11:57

score 1 · Answer 2 · answered Jun 27 '19 at 10:03

1

ngStyle is work like this

[ngStyle]="{'color': 'blue', 'font-size': '24px', 'font-weight': 'bold'}"

answered Jun 27 '19 at 10:03

Pavan Nagadiya

652
4
10

score 0 · Answer 3 · answered Jun 27 '19 at 09:58

0

the code is looks good! if you really returned {width: "500px", height: "400px"} i think you should return the value with single qutation like {width: '500px', height: '400px'}

I hope to help more :)

answered Jun 27 '19 at 09:58

Rabea AlTaradeh

213
1
9

Another good suggestion. I was already using single quotes, but when the console prints the style, it formats double quotes. – intotecho Jun 27 '19 at 11:58
try this answer [force-a-components-re-rendering](https://stackoverflow.com/questions/35105374/how-to-force-a-components-re-rendering-in-angular-2) to re-render the page after changes – Rabea AlTaradeh Jun 27 '19 at 13:27

Angular ngStyle inside img tag not updating dynamically

3 Answers3