title: aframe-state component to attach/detach components
body: <p>I am trying to attach/detach components to entity based on certain conditions.</p>
  
  <p>For example, I want to be able to track two conditions - </p>
  
  <ol>
  <li>A player has clicked on play button and </li>
  <li>The time count down is not yet zero</li>
  </ol>
  
  <p>before I attach a component to an entity.</p>
  
  <p>I looked at the following component from Kevin - <a href="https://github.com/ngokevin/kframe/tree/master/components/state/" rel="nofollow noreferrer">https://github.com/ngokevin/kframe/tree/master/components/state/</a></p>
  
  <p>where there is an example on attaching/detaching components based on boolean value. Here is an extract from his documentation  </p>
  
  <blockquote>
    <p>There's a bind-toggle component which will attach and detach a
    component entirely based on a boolean value.</p>
  </blockquote>
  
  <pre><code>&lt;a-entity bind-toggle__raycastable="isRaycastable"&gt;&lt;/a-entity&gt;
  </code></pre>
  
  <p>But, it's not clear where that boolean value is being set before the raycastable component gets attached to the entity. </p>
  
  <p>I am looking for a solution where I can write the entity as follows </p>
  
  <pre><code>&lt;a-entity bind-toggle__move="condition1 &amp;&amp; condition2"&gt;&lt;/a-entity&gt;
  </code></pre>
  
  <p>where the component "move" gets attached to the entity when condition 1 (play button is clicked) and condition 2( time count down is not zero) are satisfied. I need to know where to set the values for condition1 and condition2.</p>
  
  <p>If you could please provide a working example for this then that would be great.</p>
  
  <p>I can attach a codepen if that would make it easier to understand.</p>