function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Gaurav Sinha 15Gaurav Sinha 15 

Remove Dynamic Color Lightning commponent


I have the below code to display the dynamic color of a list
  
<aura:component controller="INTL_CalendarController" implements="forceCommunity:availableForAllPageTypes"  access="global">
    <aura:registerEvent name="startFilter" type="c:filterEvents"/>
    <aura:attribute name="calendarEventFilter" type="User_Calendar_Department__mdt[]" />
    <ul aura:id="eventFilter" class="slds-has-dividers--top">
        <aura:iteration items="{!v.calendarEventFilter}" var="eve">

            <li style="{!'background-color:' + eve.Color_Code__c}"   onclick="{!c.handlePress}" class="selected">
                   {!eve.Label}
            </li>
        </aura:iteration> 

    </ul>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
</aura:component>
My requirement is on click of individual "li" i need the color to disappear and if i click again color has to reappear. I also want the state to be maintained so while querying based on this list i can get the values which are selected and which are not.
This is a calendar application and i want the events to toggle based on the list.
Any help guideline will be highly appreciated.
 
NagendraNagendra (Salesforce Developers) 
Hi Gaurav,

You can add or remove a CSS style on a component or element during runtime.

To retrieve the class name on a component, use component.find('myCmp').get('v.class'), where myCmp is the aura:id attribute value.

To append and remove CSS classes from a component or element, use the $A.util.addClass(cmpTarget, 'class') and $A.util.removeClass(cmpTarget, 'class') methods.

Toggling a Class To toggle a class, use $A.util.toggleClass(cmp, 'class'), which adds or removes the class.

The cmp parameter can be component or a DOM element..

Note: We recommend using a component instead of a DOM element. If the utility function is not used inside afterRender() or rerender(), passing in cmp.getElement() might result in your class not being applied when the components are rerendered. For more information, see Events Fired During the Rendering Lifecycle.

To hide or show markup dynamically, see Dynamically Showing or Hiding Markup.

To conditionally set a class for an array of components, pass in the array to $A.util.toggleClass(). 1 mapClasses: function(arr, cssClass) { 2 for(var cmp in arr) { 3 $A.util.toggleClass(arr[cmp], cssClass); 4 } 5 }

You can toggle styles: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_cb_styles.htm

Regards,
Nagendra.