title: Binding angular component variable to CSS data attributes
body: <p>I'm getting started with Angular from React and I'm trying to make use of CSS attributes with dynamic data from the Angular Component.</p>
  
  <p>Here's what I've tried so far, and I'm a bit confused.</p>
  
  <pre><code>&lt;div id="application-menu" data-open="{{ menu }}"&gt;
    &lt;div class="background"&gt;&lt;/div&gt;
    &lt;h1&gt;Test&lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In my page I am declaring the menu to be "open"</p>
  
  <pre><code>export class AuthPage {
    menu = "true";
  }
  </code></pre>
  
  <p>In SCSS I am using the <code>[attribute]</code> feature to handle conditional rendering. </p>
  
  <pre><code>#application-menu {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100vw;
      height: 100vh;
      pointer-events: none;
      background-color: transparent;
  
      .background {
          position: absolute;
          left: -100px;
          top: -100px;
          width: 50px;
          height: 50px;
          border-radius: 50%;
          background-color: red;
          transition: all 0.4s ease-in-out;
      }
  
      &amp;[data-open="true"] {
          pointer-events: all;
          .background {
          background-color: green;
          border-radius: 0;
          width: 100vw;
          height: 100vh;
          top: 0;
          left: 0;
          }
      }
  }
  </code></pre>
  
  <p>I am trying to pass the value of <code>menu</code> from the Angular component to the <code>data-open</code> property of the div to be used in SCSS for conditional rendering. </p>