Set CSS class dynamically in Lightning web component
How would I translate that from Aura to LWC?
<aura:iteration items="{!v.contacts}" var="contact">
<div class="{!contact.isActive ? 'slds-tabs--path dimmed' : 'slds-tabs--path'}">...</div>
</aura:iteration>
css aura lightning-web-components
add a comment |
How would I translate that from Aura to LWC?
<aura:iteration items="{!v.contacts}" var="contact">
<div class="{!contact.isActive ? 'slds-tabs--path dimmed' : 'slds-tabs--path'}">...</div>
</aura:iteration>
css aura lightning-web-components
2
looks like question is related to this one - Expression Functions within Lightning Web Components
– Oleksandr Berehovskyi
Feb 6 at 9:50
1
No expression language in the template anymore, so the expression moves to the JavaScript file using the ES6get
.
– Keith C
Feb 6 at 9:55
3
But defining CSS class names in JS code is very unclean. Decades ago I learned to separate UI from Controller logic.
– Robert Sösemann
Feb 6 at 9:56
add a comment |
How would I translate that from Aura to LWC?
<aura:iteration items="{!v.contacts}" var="contact">
<div class="{!contact.isActive ? 'slds-tabs--path dimmed' : 'slds-tabs--path'}">...</div>
</aura:iteration>
css aura lightning-web-components
How would I translate that from Aura to LWC?
<aura:iteration items="{!v.contacts}" var="contact">
<div class="{!contact.isActive ? 'slds-tabs--path dimmed' : 'slds-tabs--path'}">...</div>
</aura:iteration>
css aura lightning-web-components
css aura lightning-web-components
edited Feb 6 at 14:36
Robert Sösemann
asked Feb 6 at 9:47
Robert SösemannRobert Sösemann
12.8k1176214
12.8k1176214
2
looks like question is related to this one - Expression Functions within Lightning Web Components
– Oleksandr Berehovskyi
Feb 6 at 9:50
1
No expression language in the template anymore, so the expression moves to the JavaScript file using the ES6get
.
– Keith C
Feb 6 at 9:55
3
But defining CSS class names in JS code is very unclean. Decades ago I learned to separate UI from Controller logic.
– Robert Sösemann
Feb 6 at 9:56
add a comment |
2
looks like question is related to this one - Expression Functions within Lightning Web Components
– Oleksandr Berehovskyi
Feb 6 at 9:50
1
No expression language in the template anymore, so the expression moves to the JavaScript file using the ES6get
.
– Keith C
Feb 6 at 9:55
3
But defining CSS class names in JS code is very unclean. Decades ago I learned to separate UI from Controller logic.
– Robert Sösemann
Feb 6 at 9:56
2
2
looks like question is related to this one - Expression Functions within Lightning Web Components
– Oleksandr Berehovskyi
Feb 6 at 9:50
looks like question is related to this one - Expression Functions within Lightning Web Components
– Oleksandr Berehovskyi
Feb 6 at 9:50
1
1
No expression language in the template anymore, so the expression moves to the JavaScript file using the ES6
get
.– Keith C
Feb 6 at 9:55
No expression language in the template anymore, so the expression moves to the JavaScript file using the ES6
get
.– Keith C
Feb 6 at 9:55
3
3
But defining CSS class names in JS code is very unclean. Decades ago I learned to separate UI from Controller logic.
– Robert Sösemann
Feb 6 at 9:56
But defining CSS class names in JS code is very unclean. Decades ago I learned to separate UI from Controller logic.
– Robert Sösemann
Feb 6 at 9:56
add a comment |
2 Answers
2
active
oldest
votes
The documentation covers this explicitly:
To compute a value for a property, use a JavaScript getter. For example, to convert the name to all uppercase letters, use a getter function in the JavaScript class, not an expression in the template.
Getters are much more powerful than expressions because they’re JavaScript functions. Getters also enable unit testing, which reduces bugs and increases fun.
Your example code would look like this:
<!-- MyComponent.html -->
<div class={tabClass}>
// MyComponent.js
get tabClass() {
return this.active ? 'slds-tabs--path dimmed' : 'slds-tabs--path';
}
Your concerns about separating UI from controller logic do not apply here as this is not a "controller". That MVC pattern is an Aura-ism. This is the code which drives your component's functionality so it makes sense that your JS would know about class names.
Edit:
After you changed your question, I think the best way to do what you're trying to do is to have a custom "contact" component which when clicked, becomes active, and has an
@api active;
property, which you can call from the parent. In your comments below you say this is too much overhead, but this is the proper way to do this if you wish to manage the state of the contact. In your code example you are only toggling one class, but in a real world scenario there are many different things which you might want to change about a contact and having many expressions makes the code harder to read and harder to test.
For most list items the suggestion is to have an individual element for each list item like so:
<c-list>
<c-list-item></c-list-item>
<c-list-item></c-list-item>
<c-list-item></c-list-item>
</c-list>
Can you point me to any Salesforce or general web component code (e.g. Github) where they do it like that for CSS classes? Or even a part of a documentation where they explicitly recommend this? MVC is not an Aura invention and still holds as pattern für UI.
– Robert Sösemann
Feb 6 at 12:43
This also doesn't work if the condition is based on a value I pass in. Imagine that the CSS style a <li> in an iteration and the class is dependent on the current element. Can I pass in params to setters.
– Robert Sösemann
Feb 6 at 12:49
I changed my code to better show the loop situation..
– Robert Sösemann
Feb 6 at 14:36
2
@RobertSösemann expressions is not currently allowed in LWC template (and will probably not for the foreseeable future). If you want to dynamically style each items in an iteration, the recommendation is to map over the items of the list and add aclassName
property on each item.<template for:each={items} for:item="item"><div class={item.className}></div></template>
– pmdartus
Feb 7 at 10:34
add a comment |
I was at a LWC presentation last night, and I think this recipe might get you on the right track:
https://github.com/trailheadapps/easy-spaces-lwc/blob/develop/es-space-mgmt/main/default/lwc/customerTile/customerTile.js
The parent List component creates child tiles - notice how the getter references the object and customer object that are passed in to set the alttext. That recipe also shows how selecting something in the parent component can change the css in the child if I understood it correctly.
Parent:
<li class="slds-item" key={record.Id}>
<c-customer-tile
customer={record} object={sobject} oncustomerselect={publishSelect}>
</c-customer-tile>
</li>
Child
HTML:
<lightning-icon icon-name={icon} alternative-text={alttext}></lightning-icon>
JS
import { LightningElement, api, track } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
export default class CustomerTile extends NavigationMixin(LightningElement) {
@api customer;
@api object;
@track navRef;
get icon() {
return 'standard:' + this.object.toLowerCase();
}
get alttext() {
return (
'Navigate to ' +
this.object +
' record detail for ' +
this.customer.name
);
}
1
Do I really have to create a sub component if I want to have a list item dependant class?! That is way to much overhead when migrating components :-(
– Robert Sösemann
Feb 6 at 14:01
That I don't know - I would take a look at the sample galleries (trailhead.salesforce.com/sample-gallery) to see if there is one that matches your requirements. If not, I would hit up Zanye Turner on Twitter (zaynelt) - she's been cranking out some pretty deep in the weeds content this month so is probably the best person to ask right now
– BritishBoyinDC
Feb 6 at 16:44
add a comment |
Your Answer
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "459"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsalesforce.stackexchange.com%2fquestions%2f249293%2fset-css-class-dynamically-in-lightning-web-component%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
The documentation covers this explicitly:
To compute a value for a property, use a JavaScript getter. For example, to convert the name to all uppercase letters, use a getter function in the JavaScript class, not an expression in the template.
Getters are much more powerful than expressions because they’re JavaScript functions. Getters also enable unit testing, which reduces bugs and increases fun.
Your example code would look like this:
<!-- MyComponent.html -->
<div class={tabClass}>
// MyComponent.js
get tabClass() {
return this.active ? 'slds-tabs--path dimmed' : 'slds-tabs--path';
}
Your concerns about separating UI from controller logic do not apply here as this is not a "controller". That MVC pattern is an Aura-ism. This is the code which drives your component's functionality so it makes sense that your JS would know about class names.
Edit:
After you changed your question, I think the best way to do what you're trying to do is to have a custom "contact" component which when clicked, becomes active, and has an
@api active;
property, which you can call from the parent. In your comments below you say this is too much overhead, but this is the proper way to do this if you wish to manage the state of the contact. In your code example you are only toggling one class, but in a real world scenario there are many different things which you might want to change about a contact and having many expressions makes the code harder to read and harder to test.
For most list items the suggestion is to have an individual element for each list item like so:
<c-list>
<c-list-item></c-list-item>
<c-list-item></c-list-item>
<c-list-item></c-list-item>
</c-list>
Can you point me to any Salesforce or general web component code (e.g. Github) where they do it like that for CSS classes? Or even a part of a documentation where they explicitly recommend this? MVC is not an Aura invention and still holds as pattern für UI.
– Robert Sösemann
Feb 6 at 12:43
This also doesn't work if the condition is based on a value I pass in. Imagine that the CSS style a <li> in an iteration and the class is dependent on the current element. Can I pass in params to setters.
– Robert Sösemann
Feb 6 at 12:49
I changed my code to better show the loop situation..
– Robert Sösemann
Feb 6 at 14:36
2
@RobertSösemann expressions is not currently allowed in LWC template (and will probably not for the foreseeable future). If you want to dynamically style each items in an iteration, the recommendation is to map over the items of the list and add aclassName
property on each item.<template for:each={items} for:item="item"><div class={item.className}></div></template>
– pmdartus
Feb 7 at 10:34
add a comment |
The documentation covers this explicitly:
To compute a value for a property, use a JavaScript getter. For example, to convert the name to all uppercase letters, use a getter function in the JavaScript class, not an expression in the template.
Getters are much more powerful than expressions because they’re JavaScript functions. Getters also enable unit testing, which reduces bugs and increases fun.
Your example code would look like this:
<!-- MyComponent.html -->
<div class={tabClass}>
// MyComponent.js
get tabClass() {
return this.active ? 'slds-tabs--path dimmed' : 'slds-tabs--path';
}
Your concerns about separating UI from controller logic do not apply here as this is not a "controller". That MVC pattern is an Aura-ism. This is the code which drives your component's functionality so it makes sense that your JS would know about class names.
Edit:
After you changed your question, I think the best way to do what you're trying to do is to have a custom "contact" component which when clicked, becomes active, and has an
@api active;
property, which you can call from the parent. In your comments below you say this is too much overhead, but this is the proper way to do this if you wish to manage the state of the contact. In your code example you are only toggling one class, but in a real world scenario there are many different things which you might want to change about a contact and having many expressions makes the code harder to read and harder to test.
For most list items the suggestion is to have an individual element for each list item like so:
<c-list>
<c-list-item></c-list-item>
<c-list-item></c-list-item>
<c-list-item></c-list-item>
</c-list>
Can you point me to any Salesforce or general web component code (e.g. Github) where they do it like that for CSS classes? Or even a part of a documentation where they explicitly recommend this? MVC is not an Aura invention and still holds as pattern für UI.
– Robert Sösemann
Feb 6 at 12:43
This also doesn't work if the condition is based on a value I pass in. Imagine that the CSS style a <li> in an iteration and the class is dependent on the current element. Can I pass in params to setters.
– Robert Sösemann
Feb 6 at 12:49
I changed my code to better show the loop situation..
– Robert Sösemann
Feb 6 at 14:36
2
@RobertSösemann expressions is not currently allowed in LWC template (and will probably not for the foreseeable future). If you want to dynamically style each items in an iteration, the recommendation is to map over the items of the list and add aclassName
property on each item.<template for:each={items} for:item="item"><div class={item.className}></div></template>
– pmdartus
Feb 7 at 10:34
add a comment |
The documentation covers this explicitly:
To compute a value for a property, use a JavaScript getter. For example, to convert the name to all uppercase letters, use a getter function in the JavaScript class, not an expression in the template.
Getters are much more powerful than expressions because they’re JavaScript functions. Getters also enable unit testing, which reduces bugs and increases fun.
Your example code would look like this:
<!-- MyComponent.html -->
<div class={tabClass}>
// MyComponent.js
get tabClass() {
return this.active ? 'slds-tabs--path dimmed' : 'slds-tabs--path';
}
Your concerns about separating UI from controller logic do not apply here as this is not a "controller". That MVC pattern is an Aura-ism. This is the code which drives your component's functionality so it makes sense that your JS would know about class names.
Edit:
After you changed your question, I think the best way to do what you're trying to do is to have a custom "contact" component which when clicked, becomes active, and has an
@api active;
property, which you can call from the parent. In your comments below you say this is too much overhead, but this is the proper way to do this if you wish to manage the state of the contact. In your code example you are only toggling one class, but in a real world scenario there are many different things which you might want to change about a contact and having many expressions makes the code harder to read and harder to test.
For most list items the suggestion is to have an individual element for each list item like so:
<c-list>
<c-list-item></c-list-item>
<c-list-item></c-list-item>
<c-list-item></c-list-item>
</c-list>
The documentation covers this explicitly:
To compute a value for a property, use a JavaScript getter. For example, to convert the name to all uppercase letters, use a getter function in the JavaScript class, not an expression in the template.
Getters are much more powerful than expressions because they’re JavaScript functions. Getters also enable unit testing, which reduces bugs and increases fun.
Your example code would look like this:
<!-- MyComponent.html -->
<div class={tabClass}>
// MyComponent.js
get tabClass() {
return this.active ? 'slds-tabs--path dimmed' : 'slds-tabs--path';
}
Your concerns about separating UI from controller logic do not apply here as this is not a "controller". That MVC pattern is an Aura-ism. This is the code which drives your component's functionality so it makes sense that your JS would know about class names.
Edit:
After you changed your question, I think the best way to do what you're trying to do is to have a custom "contact" component which when clicked, becomes active, and has an
@api active;
property, which you can call from the parent. In your comments below you say this is too much overhead, but this is the proper way to do this if you wish to manage the state of the contact. In your code example you are only toggling one class, but in a real world scenario there are many different things which you might want to change about a contact and having many expressions makes the code harder to read and harder to test.
For most list items the suggestion is to have an individual element for each list item like so:
<c-list>
<c-list-item></c-list-item>
<c-list-item></c-list-item>
<c-list-item></c-list-item>
</c-list>
edited Feb 6 at 15:09
answered Feb 6 at 12:30
citizen conncitizen conn
481213
481213
Can you point me to any Salesforce or general web component code (e.g. Github) where they do it like that for CSS classes? Or even a part of a documentation where they explicitly recommend this? MVC is not an Aura invention and still holds as pattern für UI.
– Robert Sösemann
Feb 6 at 12:43
This also doesn't work if the condition is based on a value I pass in. Imagine that the CSS style a <li> in an iteration and the class is dependent on the current element. Can I pass in params to setters.
– Robert Sösemann
Feb 6 at 12:49
I changed my code to better show the loop situation..
– Robert Sösemann
Feb 6 at 14:36
2
@RobertSösemann expressions is not currently allowed in LWC template (and will probably not for the foreseeable future). If you want to dynamically style each items in an iteration, the recommendation is to map over the items of the list and add aclassName
property on each item.<template for:each={items} for:item="item"><div class={item.className}></div></template>
– pmdartus
Feb 7 at 10:34
add a comment |
Can you point me to any Salesforce or general web component code (e.g. Github) where they do it like that for CSS classes? Or even a part of a documentation where they explicitly recommend this? MVC is not an Aura invention and still holds as pattern für UI.
– Robert Sösemann
Feb 6 at 12:43
This also doesn't work if the condition is based on a value I pass in. Imagine that the CSS style a <li> in an iteration and the class is dependent on the current element. Can I pass in params to setters.
– Robert Sösemann
Feb 6 at 12:49
I changed my code to better show the loop situation..
– Robert Sösemann
Feb 6 at 14:36
2
@RobertSösemann expressions is not currently allowed in LWC template (and will probably not for the foreseeable future). If you want to dynamically style each items in an iteration, the recommendation is to map over the items of the list and add aclassName
property on each item.<template for:each={items} for:item="item"><div class={item.className}></div></template>
– pmdartus
Feb 7 at 10:34
Can you point me to any Salesforce or general web component code (e.g. Github) where they do it like that for CSS classes? Or even a part of a documentation where they explicitly recommend this? MVC is not an Aura invention and still holds as pattern für UI.
– Robert Sösemann
Feb 6 at 12:43
Can you point me to any Salesforce or general web component code (e.g. Github) where they do it like that for CSS classes? Or even a part of a documentation where they explicitly recommend this? MVC is not an Aura invention and still holds as pattern für UI.
– Robert Sösemann
Feb 6 at 12:43
This also doesn't work if the condition is based on a value I pass in. Imagine that the CSS style a <li> in an iteration and the class is dependent on the current element. Can I pass in params to setters.
– Robert Sösemann
Feb 6 at 12:49
This also doesn't work if the condition is based on a value I pass in. Imagine that the CSS style a <li> in an iteration and the class is dependent on the current element. Can I pass in params to setters.
– Robert Sösemann
Feb 6 at 12:49
I changed my code to better show the loop situation..
– Robert Sösemann
Feb 6 at 14:36
I changed my code to better show the loop situation..
– Robert Sösemann
Feb 6 at 14:36
2
2
@RobertSösemann expressions is not currently allowed in LWC template (and will probably not for the foreseeable future). If you want to dynamically style each items in an iteration, the recommendation is to map over the items of the list and add a
className
property on each item. <template for:each={items} for:item="item"><div class={item.className}></div></template>
– pmdartus
Feb 7 at 10:34
@RobertSösemann expressions is not currently allowed in LWC template (and will probably not for the foreseeable future). If you want to dynamically style each items in an iteration, the recommendation is to map over the items of the list and add a
className
property on each item. <template for:each={items} for:item="item"><div class={item.className}></div></template>
– pmdartus
Feb 7 at 10:34
add a comment |
I was at a LWC presentation last night, and I think this recipe might get you on the right track:
https://github.com/trailheadapps/easy-spaces-lwc/blob/develop/es-space-mgmt/main/default/lwc/customerTile/customerTile.js
The parent List component creates child tiles - notice how the getter references the object and customer object that are passed in to set the alttext. That recipe also shows how selecting something in the parent component can change the css in the child if I understood it correctly.
Parent:
<li class="slds-item" key={record.Id}>
<c-customer-tile
customer={record} object={sobject} oncustomerselect={publishSelect}>
</c-customer-tile>
</li>
Child
HTML:
<lightning-icon icon-name={icon} alternative-text={alttext}></lightning-icon>
JS
import { LightningElement, api, track } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
export default class CustomerTile extends NavigationMixin(LightningElement) {
@api customer;
@api object;
@track navRef;
get icon() {
return 'standard:' + this.object.toLowerCase();
}
get alttext() {
return (
'Navigate to ' +
this.object +
' record detail for ' +
this.customer.name
);
}
1
Do I really have to create a sub component if I want to have a list item dependant class?! That is way to much overhead when migrating components :-(
– Robert Sösemann
Feb 6 at 14:01
That I don't know - I would take a look at the sample galleries (trailhead.salesforce.com/sample-gallery) to see if there is one that matches your requirements. If not, I would hit up Zanye Turner on Twitter (zaynelt) - she's been cranking out some pretty deep in the weeds content this month so is probably the best person to ask right now
– BritishBoyinDC
Feb 6 at 16:44
add a comment |
I was at a LWC presentation last night, and I think this recipe might get you on the right track:
https://github.com/trailheadapps/easy-spaces-lwc/blob/develop/es-space-mgmt/main/default/lwc/customerTile/customerTile.js
The parent List component creates child tiles - notice how the getter references the object and customer object that are passed in to set the alttext. That recipe also shows how selecting something in the parent component can change the css in the child if I understood it correctly.
Parent:
<li class="slds-item" key={record.Id}>
<c-customer-tile
customer={record} object={sobject} oncustomerselect={publishSelect}>
</c-customer-tile>
</li>
Child
HTML:
<lightning-icon icon-name={icon} alternative-text={alttext}></lightning-icon>
JS
import { LightningElement, api, track } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
export default class CustomerTile extends NavigationMixin(LightningElement) {
@api customer;
@api object;
@track navRef;
get icon() {
return 'standard:' + this.object.toLowerCase();
}
get alttext() {
return (
'Navigate to ' +
this.object +
' record detail for ' +
this.customer.name
);
}
1
Do I really have to create a sub component if I want to have a list item dependant class?! That is way to much overhead when migrating components :-(
– Robert Sösemann
Feb 6 at 14:01
That I don't know - I would take a look at the sample galleries (trailhead.salesforce.com/sample-gallery) to see if there is one that matches your requirements. If not, I would hit up Zanye Turner on Twitter (zaynelt) - she's been cranking out some pretty deep in the weeds content this month so is probably the best person to ask right now
– BritishBoyinDC
Feb 6 at 16:44
add a comment |
I was at a LWC presentation last night, and I think this recipe might get you on the right track:
https://github.com/trailheadapps/easy-spaces-lwc/blob/develop/es-space-mgmt/main/default/lwc/customerTile/customerTile.js
The parent List component creates child tiles - notice how the getter references the object and customer object that are passed in to set the alttext. That recipe also shows how selecting something in the parent component can change the css in the child if I understood it correctly.
Parent:
<li class="slds-item" key={record.Id}>
<c-customer-tile
customer={record} object={sobject} oncustomerselect={publishSelect}>
</c-customer-tile>
</li>
Child
HTML:
<lightning-icon icon-name={icon} alternative-text={alttext}></lightning-icon>
JS
import { LightningElement, api, track } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
export default class CustomerTile extends NavigationMixin(LightningElement) {
@api customer;
@api object;
@track navRef;
get icon() {
return 'standard:' + this.object.toLowerCase();
}
get alttext() {
return (
'Navigate to ' +
this.object +
' record detail for ' +
this.customer.name
);
}
I was at a LWC presentation last night, and I think this recipe might get you on the right track:
https://github.com/trailheadapps/easy-spaces-lwc/blob/develop/es-space-mgmt/main/default/lwc/customerTile/customerTile.js
The parent List component creates child tiles - notice how the getter references the object and customer object that are passed in to set the alttext. That recipe also shows how selecting something in the parent component can change the css in the child if I understood it correctly.
Parent:
<li class="slds-item" key={record.Id}>
<c-customer-tile
customer={record} object={sobject} oncustomerselect={publishSelect}>
</c-customer-tile>
</li>
Child
HTML:
<lightning-icon icon-name={icon} alternative-text={alttext}></lightning-icon>
JS
import { LightningElement, api, track } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
export default class CustomerTile extends NavigationMixin(LightningElement) {
@api customer;
@api object;
@track navRef;
get icon() {
return 'standard:' + this.object.toLowerCase();
}
get alttext() {
return (
'Navigate to ' +
this.object +
' record detail for ' +
this.customer.name
);
}
answered Feb 6 at 13:53
BritishBoyinDCBritishBoyinDC
8,9412764
8,9412764
1
Do I really have to create a sub component if I want to have a list item dependant class?! That is way to much overhead when migrating components :-(
– Robert Sösemann
Feb 6 at 14:01
That I don't know - I would take a look at the sample galleries (trailhead.salesforce.com/sample-gallery) to see if there is one that matches your requirements. If not, I would hit up Zanye Turner on Twitter (zaynelt) - she's been cranking out some pretty deep in the weeds content this month so is probably the best person to ask right now
– BritishBoyinDC
Feb 6 at 16:44
add a comment |
1
Do I really have to create a sub component if I want to have a list item dependant class?! That is way to much overhead when migrating components :-(
– Robert Sösemann
Feb 6 at 14:01
That I don't know - I would take a look at the sample galleries (trailhead.salesforce.com/sample-gallery) to see if there is one that matches your requirements. If not, I would hit up Zanye Turner on Twitter (zaynelt) - she's been cranking out some pretty deep in the weeds content this month so is probably the best person to ask right now
– BritishBoyinDC
Feb 6 at 16:44
1
1
Do I really have to create a sub component if I want to have a list item dependant class?! That is way to much overhead when migrating components :-(
– Robert Sösemann
Feb 6 at 14:01
Do I really have to create a sub component if I want to have a list item dependant class?! That is way to much overhead when migrating components :-(
– Robert Sösemann
Feb 6 at 14:01
That I don't know - I would take a look at the sample galleries (trailhead.salesforce.com/sample-gallery) to see if there is one that matches your requirements. If not, I would hit up Zanye Turner on Twitter (zaynelt) - she's been cranking out some pretty deep in the weeds content this month so is probably the best person to ask right now
– BritishBoyinDC
Feb 6 at 16:44
That I don't know - I would take a look at the sample galleries (trailhead.salesforce.com/sample-gallery) to see if there is one that matches your requirements. If not, I would hit up Zanye Turner on Twitter (zaynelt) - she's been cranking out some pretty deep in the weeds content this month so is probably the best person to ask right now
– BritishBoyinDC
Feb 6 at 16:44
add a comment |
Thanks for contributing an answer to Salesforce Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsalesforce.stackexchange.com%2fquestions%2f249293%2fset-css-class-dynamically-in-lightning-web-component%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
looks like question is related to this one - Expression Functions within Lightning Web Components
– Oleksandr Berehovskyi
Feb 6 at 9:50
1
No expression language in the template anymore, so the expression moves to the JavaScript file using the ES6
get
.– Keith C
Feb 6 at 9:55
3
But defining CSS class names in JS code is very unclean. Decades ago I learned to separate UI from Controller logic.
– Robert Sösemann
Feb 6 at 9:56