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:
- Create a liquid variable that contains the class names beforehand
- 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
How Would You Make Two <Div>S Overlap
How to Include CSS Files Using Node, Express, and Ejs
Override Body Style for Content in an Iframe
Want My Button to Remain Dark When Clicked
Safari: Media Query Not Firing At the Expected Width
How to Avoid Extra Blank Page At End While Printing
How to Override Vuetify Styles
How to Change Color Property of Mat-Slide-Toggle/ Overwrite CSS of Component
How to Set the Width of Select Box Options
Swap Div Position With CSS Only
Make a Div Fill an Entire Table Cell
Angular 5 - Failed to Load Resource: the Server Responded With a Status of 404 (Not Found)
How to Change Paper Size in Headless Chrome - Print-To-Pdf
How to Create a Flexible Vertical Line in Between Two Divs
Detect If a Browser in a Mobile Device (Ios/Android Phone/Tablet) Is Used