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.

Possible duplicate of Angular 2 data attributes

Bmaed Riasbet
– Bmaed Riasbet

2019-02-02 15:41:31 +00:00
Commented Feb 2, 2019 at 15:41 — Bmaed Riasbet
– Bmaed Riasbet, Commented Feb 2, 2019 at 15:41

Martin Parenteau · Accepted Answer · 2018-12-30 02:01:05Z

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.

answered Dec 30, 2018 at 2:01

Martin Parenteau

74k13 gold badges137 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bmaed Riasbet · Accepted Answer · 2018-12-30 02:01:53Z

1

Use attr for binding to data attributes:

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

answered Dec 30, 2018 at 2:01

Bmaed Riasbet

15.1k9 gold badges42 silver badges57 bronze badges

Collectives™ on Stack Overflow

Binding angular component variable to CSS data attributes

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related