The following table shows supported Util functions:
| Util Class | Description | Example Code |
| addClass (Object elementString newClass) |
Adds a CSS class to a component. |
var myCmp = component.find("myCmp"); $A.util.addClass(myCmp, "myClass"); |
| getBooleanValue (object val): Boolean | Coerces truthy and falsy values into native Booleans. | |
| hasClass (Object elementString className): Boolean |
Checks whether the component has the specified CSS class. |
//find a component with aura:id="myCmp" in markup var myCmp = component.find("myCmp"); $A.util.hasClass(myCmp, "myClass"); |
| isArray (Object obj): Boolean |
Checks whether the specified object is an array. |
|
| isEmpty (Object obj): Boolean |
Checks whether the object is empty. An empty object's value is undefined, null, an empty array, or an empty string. An object with no native properties is not considered empty. |
|
| isObject (Object obj): Boolean |
Checks whether the specified object is a valid object. A valid object is not a DOM element; a native browser class (XMLHttpRequest) is not falsely; and it is not an array, error, function string, or number. |
|
| isUndefined (Object obj): Boolean |
Checks whether the object is undefined. |
|
| toggleClass (Object: elementString className) |
Checks whether the object is undefined or null. |
|
| isUndefinedOrNull (Object obj): Boolean |
Removes a CSS class from a component. |
|
| removeClass (Object: elementString newClass) |
Toggles (adds or removes) a CSS class from a component. |
//find a component with aura:id="toggleMe" in markup var toggleText = component.find("toggleMe"); $A.util.toggleClass(toggleText, "toggle"); |
The following is a simple application to create a toggle. Create a simple application and copy the following code, then click on the Toggle button to understand how a CSS class is added and removed.
The HideAndShowUpApp.app code is as follows:
<aura:application extends="force:slds">
<div class="spinner" aura:id="spinner">
<Lightning:spinner alternativeText="Loading" />
</div>
<Lightning:button label="Toggle" variant="brand" onclick="{! c.handleClick }" class="btn"/>
</aura:application>
The CSS-style code is as follows (for HideAndShowUpApp.css):
.THIS.spinner {
position: absolute;
display: inline-block;
width: 80px;
height: 80px;
margin :50px
}
.THIS.btn {
margin-top :150px;
margin-left :50px;
}
/*toggleCss.css*/
.THIS.toggle {
display: none;
}
The controller code is in the HideAndShowUpAppController.js file, as follows:
({
handleClick : function(component, event, helper) {
var spinnerComponent = component.find("spinner");
console.log(spinnerComponent);
$A.util.toggleClass(spinnerComponent, "toggle");
}
})
Notice that the CSS class toggle has the display:none attribute, for CSS.