title: How to pass value from Lightning Web Component to Flow variable?
body: <p>Does anyone know the way to pass value from LWC to Flow variable?</p>
  <p>When clicking &quot;Add Name&quot; button, I want input value to be passed to Flow valuable. &quot;Manually assign variables (advanced)&quot; is valid on the screen setting. But the variable is null and never changes.</p>
  <p>xml</p>
  <pre><code>&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
  &lt;LightningComponentBundle xmlns=&quot;http://soap.sforce.com/2006/04/metadata&quot;&gt;
      &lt;apiVersion&gt;50.0&lt;/apiVersion&gt;
      &lt;isExposed&gt;true&lt;/isExposed&gt;
      &lt;targets&gt;
          &lt;target&gt;lightning__FlowScreen&lt;/target&gt;
      &lt;/targets&gt;
      &lt;targetConfigs&gt;
          &lt;targetConfig targets=&quot;lightning__FlowScreen&quot;&gt;
              &lt;property name=&quot;sampleName&quot; type=&quot;String&quot; label=&quot;sampleName&quot;/&gt;
          &lt;/targetConfig&gt;
      &lt;/targetConfigs&gt;
  &lt;/LightningComponentBundle&gt;
  </code></pre>
  <p>js</p>
  <pre><code>import { LightningElement,api } from 'lwc';
  import { FlowAttributeChangeEvent, FlowNavigationNextEvent } from 'lightning/flowSupport';
  export default class sampleFlowComponent extends LightningElement {
      @api
      availableActions = [];
      @api
      sampleName;
      handleAttributeChange() {
          const attributeChangeEvent = new FlowAttributeChangeEvent('sampleName', this.sampleName);
          this.dispatchEvent(attributeChangeEvent);
      }
      handleNext() {
          if (this.availableActions.find(action =&gt; action === 'NEXT')) {
              const navigateNextEvent = new FlowNavigationNextEvent();
              this.dispatchEvent(navigateNextEvent);
          }
      }
  }
  </code></pre>
  <p>html</p>
  <pre><code>&lt;template&gt;
      &lt;lightning-input
          label=&quot;sampleName&quot;
          type=&quot;text&quot;&gt;
      &lt;/lightning-input&gt;
      &lt;lightning-button
          label=&quot;Add Name&quot;
          title=&quot;Add Name&quot;
          onclick={handleAttributeChange}&gt;
      &lt;/lightning-button&gt;
      &lt;lightning-button
          label=&quot;Go Next&quot;
          title=&quot;Go next&quot;
          onclick={handleNext}&gt;
      &lt;/lightning-button&gt;
  &lt;/template&gt;
  </code></pre>
  <p>Any information would be helpful!</p>