CODEWITHSUNDEEP
angulartypescript
Christopher
Christopher

Reputation: 1772

Angular ngStyle for multiple styles

I am working on a simple animation library where my user can modify my component using property binding, so far I have been doing the following to apply their choices:

<div [style.background]="color" [style.width.px]="width" [style.height.px]="height"></div>

But for future additions I wish to change this whole mess with [ngStyle]="styleObject" to simplify adding more properties, I am trying to achieve this like such:

@Input() width: number;
@Input() height: number;

public styleObject: Object = {
    'height': this.height,
    'width': this.width
};

But for some reason <div [ngStyle]="styleObject"></div> is not taking into account the style shown above.

Please note that adding + 'px' and doing height.px does not solve my issue.

What am I not seeing?

--

A few tests have shown that

styleObject = {
    'height': 200 + 'px',
    'background': 'red'
};

works and is applied to the div, but that replacing 200 with this.height (of type number) does not.

Upvotes: 38

Views: 101868

Answers (8)

Rohan Ayush
Rohan Ayush

Reputation: 41

If you need to add different conditions for different styling, you can do in this way:

 [ngStyle]="{
  'background-color': rank >= 3 ? '#1371FE' : '#E8E8E8',
  'color': rank == 1 ?'white':'#1A1B1C'
}"

Upvotes: 0

Pykara_Developer
Pykara_Developer

Reputation: 318

The code below shows how to do multiple styles:

[ngStyle]="{'left' : calcWidth,'top' : calcHeight}"

Upvotes: 0

Alex K - JESUS first
Alex K - JESUS first

Reputation: 1993

Try this approach

[ngStyle]="isTrue ? {width: '50px', height: '20px'} : {}"

Or

[ngStyle]="{
  width: '50px', 
  height: '20px'
}"

Upvotes: 47

Nurak Chaisri
Nurak Chaisri

Reputation: 1

Try this approach [ngStyle]="{ backgroundColor: 'blue':'transparent', color: 'white'}"

Upvotes: 0

Bal Krishna Jha
Bal Krishna Jha

Reputation: 7206

I think Angular has started supporting unit. Working on Angular: 8.2.14.

The key is a style name, with an optional . suffix (such as 'top.px', 'font-style.em').

Now you can use [ngStyle]="{'width.px':200, 'height.px':200}"

Upvotes: 2

yglodt
yglodt

Reputation: 14551

You can enumerate multiple style rules like this inside ngStyle:

<img src="..." [ngStyle]="{'height' : size+'px', 'width' : size+'px'}" />

Upvotes: 15

Hamed Baatour
Hamed Baatour

Reputation: 6932

When you using ngStyle you should create a function returning one of the following: a string, an array or an object.

if you want to return an Object you do the following:

in your template:

<div [ngStyle]="styleObject()"></div>

in your component:

export class AppComponent{
 styleObject(): Object {
       if (/** YOUR CONDITION TO SHOW THE STYLES*/  ){
           return {height: this.height,width: this.width}
       }
       return {}
   }
}

Upvotes: 41

ppham27
ppham27

Reputation: 823

If you define your styleObject like that this.height and this.width will be undefined. At the very least, define the styleObject in ngOnInit in which bindings will be guaranteed to be initialized.

For a more dynamic feel, where the user can change properties after the component has been rendered, you can use getters/setters.

It will look something like this:

export class YourComponent {    
  styleObject: {[key: string]: string} = {};

  @Input()
  set width(w: string) {
    styleObject = Object.assign({}, styleObject, {width: w});
  }
  get width() { return styleObject.width; }

  @Input()
  set height(h: string) {
    styleObject = Object.assign({}, styleObject, {height: h});
  }
  get height() { return styleObject.height; }
}

You can probably omit the getters, actually.

Upvotes: 0

Related Questions