How to use variable in [ngStyle] in angular?

Question

I want to change position depends on some events. For example at the begining space from top should be 100px, but after button click should be 0px

<mat-list-item class="menu-item disabled " disableRipple (click)="toggleSubmenu($event)">
    <h3 matLine class="menu-item-text">Orchestration</h3>
  </mat-list-item>

I want to code some similar to

<mat-list-item class="menu-item disabled " disableRipple (click)="toggleSubmenu($event)" [ngStyle]={top: myVarilable+'px'}>
    <h3 matLine class="menu-item-text">Orchestration</h3>
  </mat-list-item>

but it doesnt work for me. Do you have some ideas to solve it?

`[ngStyle]="{'margin-top': myVarilable+'px'}"` or `[style.margin-top]="myVariable+'px+"` — Eliseo, Jul 16 '19 at 07:43
Adding styles into the template files can be really confusing to fix and work with later, @Smolarek. The "correct" way to do it would be creating two classes for each behavior you expect and, with the event, changing the class of the element. — Rafael, Jul 16 '19 at 07:53
Thanks for help. I used [ngStyle]='myStyle', and in .ts file I created myStyle variable :) — , Jul 16 '19 at 08:00
@smolarekman you can do this more easily. `[style.top.px]="myVarilable"` Please check the answer I posted. — polyglot, Jul 16 '19 at 08:08

score 12 · Accepted Answer · answered Jul 16 '19 at 08:02

12

I am not sure if is what you are looking for but you can pass an Object in the ngStyle, so you can use a function that returns a dynamically generated object.

Something like that.

HTML

<p [ngStyle]="setMyStyles()">
  You say tomato, I say tomato
</p>

Component

setMyStyles() {
  let styles = {
    'top': this.user.myVarilable + 'px',
  };
  return styles;
}

answered Jul 16 '19 at 08:02

Giorgos Papageorgiou

576
4
11

4

It's not recommended to use functions directly in templates for it causes memory leaks. Store the value in a variable and use it for binding or use a pure pipe instead. – Houmam Hatahet Nov 26 '21 at 10:49

score 6 · Answer 2 · answered Jul 16 '19 at 08:06

6

You can do this very simply.

[ngStyle]="{'top.px': myVarilable}"

Otherwise:

[style.top.px]="myVarilable"

answered Jul 16 '19 at 08:06

polyglot

822
5
9

The second one is very elegant and eminently useful. – AppDreamer Mar 20 '22 at 23:59
Now I am curious how you could use the second "Otherwise" to assign multiple variables to multiple settings like background-color and color in the same statement? – AppDreamer Mar 21 '22 at 00:11

papastepan · Answer 3 · 2019-07-16T08:28:23.190

4

<div [ngStyle]="{'margin-top': !clicked ? '0px' : '100px'}"></div>

edited Jul 16 '19 at 08:28

answered Jul 16 '19 at 08:07

papastepan

179
9

score 0 · Answer 4 · answered Sep 19 '22 at 15:19

0

I fixed by adding below code on HTML and ts files.

HTML :

<div [ngStyle]="getStyles()">

TS:

getStyles(): void {
    const myStyles = {
                'background': 'red,
            };
         return myStyles;
     }

Hope this will work fine.

answered Sep 19 '22 at 15:19

Basavaraj SK

245
3
3

That is an anti pattern. There are so many better alternatives mentioned in other answers, so if anyone stumbles on this issue - don't use this solution. – pascalpuetz Sep 19 '22 at 16:37

score 0 · Answer 5 · answered Nov 03 '22 at 20:04

Upgrading to Angular v9 isn't a Option for my Project. So this works:

<div [style]="color">...</div>

color = this.sanitizer.bypassSecurityTrustStyle('--someKey: ' + someVariable);

example 2:

[style]="colorTest(progressPercentageValueoutOfTotal, progressColor)"

colorTest(progressPercentageValueoutOfTotal, progressColor) {
  return this.sanitizer.bypassSecurityTrustStyle('--percent: ' + progressPercentageValueoutOfTotal + '; stroke:' + progressColor);
}

I figured out, that it doesn't work if any other styles were set via [style.anyKey] or [ngStyle], so i had to create a container wich only contains the variable.

How to use variable in [ngStyle] in angular?

5 Answers5