Binding angular component variable to CSS data attributes

Question

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.

Here's what I've tried so far, and I'm a bit confused.

<div id="application-menu" data-open="{{ menu }}">
  <div class="background"></div>
  <h1>Test</h1>
</div>

In my page I am declaring the menu to be "open"

export class AuthPage {
  menu = "true";
}

In SCSS I am using the [attribute] feature to handle conditional rendering.

#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;
    }

    &[data-open="true"] {
        pointer-events: all;
        .background {
        background-color: green;
        border-radius: 0;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;
        }
    }
}

I am trying to pass the value of menu from the Angular component to the data-open property of the div to be used in SCSS for conditional rendering.

Answer 1

Since data-open is an attribute, not a property, of the div element, you should use attribute binding:

<div id="application-menu" [attr.data-open]="menu">
  <div class="background"></div>
  <h1>Test</h1>
</div>

See this stackblitz for a demo.

Answer 2

Use attr for binding to data attributes:

<div id="application-menu" [attr.data-open]="menu">
  <div class="background"></div>
  <h1>Test</h1>
</div>