We Keep Coding

Add or remove a class based on a condition

I am adding / removing a class from an element’s classList based on a variable’s truthiness. However, I’m doing it in what appears to be an obtuse way:
if (myConditionIsMet) {
myEl.classList.add("myClass");
} else {
myEl.classList.remove("myClass");
}
Is there a way in which I could make this more sexy and dynamically call the add / remove chained function for example with a conditional operator such as:
myEl.classList.{myConditionIsMet ? add('myClass') : remove('myClass')};
The above is pseudocode, of course, and I would like as plain JS as possible.

There’s a toggle method on .classList which takes a second argument (force).
This boolean argument essentially takes a condition that adds the class if true, and removes the class if false.
myEl.classList.toggle("myClass", myConditionIsMet);

Your pseudocode js
myEl.classList.{myConditionIsMet ? add('myClass') : remove('myClass')};
can be translated to actual js
myEl.classList[myConditionIsMet ? 'add' : 'remove']('myClass');
which is not particularly readable, but does exactly what you described.
For readability, I would look at the toggle method.

How to check if an attribute is a Boolean attribute?

Is there any way to check if some HTML attribute are Boolean? for example:
<input type="text" name="input" disabled=""/>
Here the disabled attribute is Boolean, I have some code and I need check before setting value whether that attribute is Boolean or not.
Why I need this?
As mentioned here we can have either "" or property name itself as the valid value not true or false.

There's basically no distinction on the level of HTML. If the attribute is simply the name without value, e.g. <input disabled>, that's a sure sign that it's a boolean attribute. However, if it's using the name="value" notation, then there's no way to distinguish it. Is class="class" a boolean attribute? No, it's a classList with one entry "class". How about foo=""? Well, it's either a boolean attribute opting for the empty-value notation, or it's an attribute with no value set.
Only the interpreter assigns boolean-ness to an attribute; i.e. while parsing the HTML into a DOM, the interpreter sets DOM attributes like this, roughly speaking:
domElement.disabled = htmlElement.hasAttribute('disabled');
If you want to know what HTML elements are booleans, you need to do the same thing an interpreter does: keep a list of DOM elements whose attributes have types and interpret the HTML according to that specification.

To solve this issue, you have the typeof operand in the following way:
var check_input = document.getElementById("check-input");
if(typeof(check_input.disabled) === "boolean"){
alert('Yes');
}
Here is a JSfiddle with the complete code. I hope that my answer can help you!

how to add multiple class names with different conditions using ng class in angular?

I need to add 2 class names in specific conditions to an element:
ng-class="(commentItem.comment | escapeHtml | direction)"
works for the first, getting text content of given html string using the "escapeHtml" filter and then getting direction of the text using the "direction" filter.
now I need to add another class to the same element this way:
ng-class="{'hidden': commentItem.isEditing}"
how to mix them both in a single ngClass directive?
Note
I think it's not possible to use the
{"exp1": condition1, "exp2": condition2}
because in the first condition, the filter returns the class name for me.

Take a look at this plnkr.
The documentation for ng-class regarding the argument states:
Expression to eval. The result of the evaluation can be a string
representing space delimited class names, an array, or a map of class
names to boolean values.
It does not have to be a literal string or map or array. You can have a function return an array of classes like this:
ng-class="getClasses()"
And use whatever you like to construct the array in your controller. If you need filters use the $filter service.
If you don't want to use a controller function to handle view details you can pass an array to ng-class and for each element write na expression that returns a class name or an empty string:
ng-class="[!!redbg ? 'redbg' : '', 'gr' + 'een']"

addClass(undefined) vs. addClass(null)

Sometimes I'd like to add class in chain, under some condition. What value would be semantically most appropriate to add no class?
Example:
$(".element").doSomething().addClass(condition ? "special-class" : undefined).doSomethingElse();
Or:
$(".element").doSomething().addClass(condition ? "special-class" : null).doSomethingElse();

Use $.toggleClass() instead:
$(".element").doSomething().toggleClass("special-class",condition).doSomethingElse();
As ruakh mentioned it, there is a difference. If condition is falsy, it will actually remove the class if it was present before. With your logic, the class can only be added, not removed.

jQuery checks input parameter like this:
typeof input == "string"
so either null or undefined will behave the same way

complex ng-class expression containing both a value and a conditional

Say I wanted to have an ng-class do two things:
1) populate a value from a variable like so
`ng-class="myAwesomeJavaScriptVariable"`
and
2) conditionally set a predefined class:
`ng-class = "{awesomeClass: myAwesomeBoolean}`
I am aware that I could do something like
class="{{myAwesomeJavaScriptVariable}}" ng-class="{awesomeClass: myAwesomeBoolean}"
How (if this is even possible) could I amalgamate those two into a single ng-class expression?

I think it might be:
data-ng-class = "{ myAwesomeJavaScriptVariable, awesomeClass: myAwesomeBoolean }"
Alternatively:
class = "{{ myAwesomeJavaScriptVariable}} left clearfix" data-ng-class="{awesomeClass: myAwesomeBoolean }"

#Abraham P:
To Set Both the Conditional Statement and Scope Variable as Class
ng-class="[{awesomeClass: myAwesomeBoolean},myAwesomeJavaScriptVariable]"
This Will Work Fine.