+ Start a Discussion
Scott H.Scott H. 

Lightning Web Component: How to combine data binding with static value?

With lightning web components, is there a way to combine a data binding with static values?

for example

<div class="staticClass {dynamicClass}"></div>

Where dynamicClass is a @track variable in the JS of the component.
This doesn't work since it literally places '{dynamicClass}' in the class. Is there anything that would allow this kind of mixing or do I need to rather make some code that would just grab the div in the DOM and change the class from there?


Deepali KulshresthaDeepali Kulshrestha
Hi Scott,
Unlike aura which has two way bindings, lightning web components only have one way data binding. You will have to attach an event handler for the lightning-input for value change as shown below and populate the variable .

From the documentation (https://developer.salesforce.com/docs/component-library/documentation/lwc/migrate_data_binding) provided by the salesforce note the following:
The data binding between components for property values is one-way.
To communicate down from a parent component to a child component, set a property or call a method on the child component.
To communicate up from a child component to a parent component, send an event.

code for the child component is as below to make sure your properties are binded when input changes,
    <lightning-input label="Name" type="text" value={inputvalue} onchange={handleChange} name={inputboxname}></lightning-     input>
    <lightning-button variant="base" label="Base" title="Event Button" onclick={handleClick}></lightning-button>
The js code is below
import { LightningElement, api} from 'lwc';
export default class Databindingchild extends LightningElement {

  constructor() {
   this.inputboxname = 'Test Input';

@api inputvalue;
@api inputboxname;

handleClick(event) {
    console.log('going here----'+this.inputvalue);
    console.log('going here----'+this.inputboxname);
    const selectedEvent = new CustomEvent('changehandle', { detail: this.inputvalue});

 handleChange(event) {
    this.inputvalue = event.target.value;
    this.inputboxname = event.target.name;

The console.log should return values .
I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Deepali Kulshrestha