How to Combine Various Conditions in a ngStyle Directive?

Question

How to Combine Various Conditions in a ngStyle Directive?

I am working with a NgStyle Tag and would like to incorporate multiple conditions, but I am encountering issues where it doesn't work or produces errors.

Here is the code snippet that I have been experimenting with:

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

Currently, only the first condition seems to be effective. When I attempt to combine these conditions, error messages are displayed. What is the best approach for implementing multiple conditions?

css angular

Answer 1

Answer №1

It is not advisable to use multiple instances of [ngStyle] within the same div element. It is recommended to utilize [ngClass] instead. Here is an example for reference:

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;
}

Check out the StackBlitz Demo here

Answer 2

It is not advisable to use multiple instances of [ngStyle] within the same div element. It is recommended to utilize [ngClass] instead. Here is an example for reference:

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;
}

Check out the StackBlitz Demo here

Answer 3

Answer №2

Give this a shot

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

Answer 4

Give this a shot

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

Answer 5

Answer №3

Is this code functional?

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

Answer 6

Is this code functional?

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

How to Combine Various Conditions in a ngStyle Directive?

Answer №1

Answer №2

Answer №3

Similar questions

Issues encountered when attempting to insert columns while ensuring the footer stays at the

Preserving content following the use of jQuery's fadeIn/fadeOut methods

How to Adjust CSS Animation Background to Fully Cover Responsive Height

Ways to ensure the bootstrap table header width aligns perfectly with the body width

NgFor is failing to display data from a fully populated array of objects

Expanding the rowspan within a table column has the effect of reducing its overall width

If the parent class in HTML has a class of "active," then use jQuery to

How to center a div with a overlay in CSS?

Troubleshooting: Border not showing up in Tailwind CSS (React JS)

Page loading causing sluggishness in Angular application

Having trouble setting the InnerHTML property of Null on my Ionic app, what could be the issue?

Discover how AngularFire Storage can efficiently handle a list of items by using the listAll method to create

Does the height of the rendered font adjust based on the length of words in Japanese formatting?

Leveraging .col-* within a .d-flex container in Bootstrap 4

Securing your application using Google authentication in Angular(17) and ASP.NET Core 8 Web API

CSS text width going from left to right

How can you animate the background of a website using AngularJS - CSS or JavaScript?

Angular-cli and Chrome extension compatibility causing unexpected UI problems post-build

Can CSS calc() achieve modulus behavior?

Tips for avoiding a noticeable sliding drawer when changing the direction of an HTML element