How to update style when a window is scaled in angular

Question

I have a chat window on my app and I want to update the size of an image in this chat window when the chat window is less than a certain width. Is there a way I can update the css style or class based on the width?

I'm using typescript and have the value of my cat window passed in:

@Input()
public chatWidth: number;

In my html, I was attempting to do something like this where I would apply a css class if the chatWidth property was less than 400:

<img *ngIf="upsell?.image?.url; let url" [src]="url" ng-class="{bigger-img : chatWidth < 400}">

However, this doesn't work and I don't seem to even get an error in my console

amal · Accepted Answer · 2018-02-26 19:38:41Z

1

Use

<img *ngIf="upsell?.image?.url; let url" [src]="url" [ngClass]="{'bigger-img': chatWidth < 400}">

More info here on ngClass.

UPDATE

You can, I believe, wrap the condition in a 'method' that returns a boolean defined in your respective component and call it in the template instead of directly declaring it in the template. Here, in your case,

in component.ts,

checkChatWidth(): boolean {
  return this.chatWidth < 400;
}

then, in your template,

<img *ngIf="upsell?.image?.url; let url" [src]="url" [ngClass]="{'bigger-img': checkChatWidth()}">

You have to take care of the possible 'null' checks within your 'method' that may arise due to not having a value for the 'chatWidth' input property based on your code setup.

edited Feb 26, 2018 at 19:38

answered Feb 26, 2018 at 18:32

amal

3,1801 gold badge15 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

DannyD Over a year ago

is it possible to do this in a typescript/javascript function instead? I just realized that I would want to position other things too and it may look nicer doing this logic somewhere else instead of in my html template

amal Over a year ago

Updated my answer. Hope that will help in you in the right direction.

Collectives™ on Stack Overflow

How to update style when a window is scaled in angular

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related