CODEWITHSUNDEEP
cssangular
lydal
lydal

Reputation: 940

Mixing Multiple conditions in a Single NgStyle Tag?

I have a NgStyle Tag and I want to use multiple conditions in it, but either it doesn't work or I receive errors.

So far, this is my code:

 <div class = "card" [ngStyle]="{'height': Card.duration.Hours == 1 ? '130px': height}"
                      [ngStyle]="{'height': Card.duration.Hours < 1 ? '100px': height}"
  >

but only the first condition works and when I want to mix these I receive errors. how can I have multiple conditions?

Upvotes: 1

Views: 1977

Answers (3)

Sudarshana Dayananda
Sudarshana Dayananda

Reputation: 5265

You cannot use multiple [ngStyle] in one div tag. use [ngClass] instead. Below is my sample example.

HTML

<div  [ngClass]="{ 'height100': hours === 1, 'height200': hours === 2, 'height300': hours === 3}">
  test
</div>

TS

export class AppComponent  {

  hours: number = 3;

  constructor () {

  }
}

CSS

.height100 {
  height: 100px;
  background: red;
}

.height200 {
  height: 200px;
  background: yellow;
}

.height300 {
  height: 300px;
  background: green;
}

StackBlitz Demo

Upvotes: 3

DimitarD
DimitarD

Reputation: 117

Does this work:

[ngStyle]="{'height': Card.duration.Hours == 1 ? '130px': ( Card.duration.Hours < 1 ? 100px : height)}"

Upvotes: 0

CIN SOFT
CIN SOFT

Reputation: 68

Try this

[ngStyle]="{'height': ((Card.duration.Hours == 1) ? '130px' : height)}"

Upvotes: 0

Related Questions