How to Conditionally Apply a Class

Angular: conditional class with *ngClass

Angular version 2+ provides several ways to add classes conditionally:

type one

    [class.my_class] = "step === 'step1'"

type two

    [ngClass]="{'my_class': step === 'step1'}"

and multiple option:

    [ngClass]="{'my_class': step === 'step1', 'my_class2' : step === 'step2' }"

type three

    [ngClass]="{1 : 'my_class1', 2 : 'my_class2', 3 : 'my_class4'}[step]"

type four

    [ngClass]="step == 'step1' ? 'my_class1' : 'my_class2'"

What is the best way to conditionally apply a class?

If you don't want to put CSS class names into Controller like I do, here is an old trick that I use since pre-v1 days. We can write an expression that evaluates directly to a class name selected, no custom directives are necessary:

ng:class="{true:'selected', false:''}[$index==selectedIndex]"

Please note the old syntax with colon.

There is also a new better way of applying classes conditionally, like:

ng-class="{selected: $index==selectedIndex}"

Angular now supports expressions that return an object. Each property (name) of this object is now considered as a class name and is applied depending on its value.

However these ways are not functionally equal. Here is an example:

ng-class="{admin:'enabled', moderator:'disabled', '':'hidden'}[user.role]"

We could therefore reuse existing CSS classes by basically mapping a model property to a class name and at the same time keep CSS classes out of Controller code.

What's an elegant way to conditionally add a class to an HTML element in a view?

I use the first way, but with a slightly more succinct syntax:

<div class="<%= 'ok' if @status == 'success' %>">

Though usually you should represent success with boolean true or a numeric record ID, and failure with boolean false or nil. This way you can just test your variable:

<div class="<%= 'ok' if @success %>">

A second form using the ternary ?: operator is useful if you want to choose between two classes:

<div class="<%= @success ? 'good' : 'bad' %>">

Finally, you can use Rail's record tag helpers such as div_for, which will automagically set your ID and class based on the record you give it. Given a Person with id 47:

# <div id="person_47" class="person good">
<% div_for @person, class: (@success ? 'good' : 'bad') do %>
<% end %>

How do I conditionally apply CSS to a class if a different class is present?

You were close! Instead of squashing the full style attribute of your bottom elem, just set the height property, and likewise, instead of replacing the className of menu, just add to and subtract from the class name:

let toggleMenu = (e) => {
  e.preventDefault();
  if (menu.classList.contains('slideup')) {
    menu.className = menu.className.replace('slideup', '');
    menu.className += ' slidedown';
    bottom.style.height = '440px';
  } else {
    menu.className = menu.className.replace('slidedown', '');
    menu.className += ' slideup';
    bottom.style.height = 'inherit';
  }
};

How to conditionally apply CSS class in a VueJs object iteration?

Just use :class = '[{"className": X}]'. Note the : immediately before the class attribute.

where,
X is a computed / data property in the vue component that is Boolean. True will add the class and False won't.

className is your css classname.

How to add a class conditionally in Vue?

in Vue class binding I think you can do this right inline in the element and actually add your class you'd like with an additional Vue computed class.

for example:

<div class="task_priority" :class="task.priority">{{ task.priority }}</div>

And do your styling as such (assuming the output for the task.priority is high,medium,low. it looks like it would be according to your posted code)

.task_priority.high {color: red}
.task_priority.medium {color: yellow}
.task_priority.low {color: green}

conditionally apply two different classes in liquid file --not working properly

One way to remove the {% if %} conditions from the class attribute would be to:

1. Create a liquid variable that contains the class names beforehand
2. Print the variable value inside the class attribute

{% assign custom_classes = '' %}
{% if item.dropdown %}
  {% assign custom_classes = custom_classes | append: 'has-dropdown ' %}
{% endif %}
{% if item.active %}
  {% assign custom_classes = custom_classes | append: 'active ' %}
{% endif %}

<li class="{{ custom_classes }}">  
  ...
</li>

---

Related Topics