Add a CSS class with Knockout JS

Question

In Magento 2, I'm working on this Knockout JS template: app/code/Magento/Checkout/view/frontend/web/template/shipping-address/shipping-method-item.html

<!--
/**
 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<tr class="row method-row"
 click="element.selectShippingMethod">
 <td class="col col-method">
 <input type="radio"
 class="radio"
 ifnot="method.error_message"
 ko-checked="element.isSelected"
 ko-value="method.carrier_code + '_' + method.method_code"
 attr="'aria-labelledby': 'label_method_' + method.method_code + '_' + method.carrier_code + ' ' + 'label_carrier_' + method.method_code + '_' + method.carrier_code,
 'checked': element.rates().length == 1 || element.isSelected" />
 </td>
 <td class="col col-price">
 <each args="element.getRegion('price')" render="" />
 </td>
 <td class="col col-method"
 attr="'id': 'label_method_' + method.method_code + '_' + method.carrier_code"
 text="method.method_title" />
 <td class="col col-carrier"
 attr="'id': 'label_carrier_' + method.method_code + '_' + method.carrier_code"
 text="method.carrier_title" />
</tr>
<tr class="row row-error"
 if="method.error_message">
 <td class="col col-error" colspan="4">
 <div role="alert" class="message error">
 <div text="method.error_message"></div>
 </div>
 <span class="no-display">
 <input type="radio"
 attr="'value' : method.method_code, 'id': 's_method_' + method.method_code" />
 </span>
 </td>
</tr>

I've overridden this template in my custom theme and would like to add a class a selected CSS to the first <tr> element if the element.isSelected

So far I've tried

<tr class="row method-row"
 click="element.selectShippingMethod" data-bind="css: { selected: element.isSelected }">

But this just adds the selected every <tr> from the loop when one is clicked.

• tweetyx: Do you find the answer ? I try to do the same

Answer 1

 <tr data-bind="css: { cssclassname: element.isSelected }">

html will render

<tr class="cssclassname"> 

You can use attr for ko bind class like this

<div data-bind="attr: {class: 'yourclasshere', id: 'yourIDhere'}">

• Holly: thanks but as I said in my question, when I tried that it "just adds the selected every <tr> from the loop when one is clicked."

Answer 2

This worked for me.

<tr data-bind="css: { 'className': element.isSelected() == (method.carrier_code + '_' + method.method_code)}">

element.isSelected() return a string like freeshipping_freeshipping.

Answer 3

Something like this will help,

<a class="action wishlist" **css="'selected-step' : isMobileFirstStepActive , '':!isMobileFirstStepActive"**>
 <span data-bind="i18n: 'Add to wishlist'"></span>
 </a>