Toggling button issue in polymer

Question

Im trying to toggle the displaying of message using a button. Below is my code.

class DisplayMessage extends PolymerElement {
  // DO YOUR CHANGES HERE
  static get template() {
    return html`
      <style>
        :host {
          display: block;
        }
      </style>

      <h2>Hello [[prop1]]!</h2>
      <button on-click="toggle">Toggle Message</button> <br />
      <template is="dom-if" if="{{user.authorise }}">
        <br />
        <span>I should now display message.</span>
      </template>
    `;
  }

  toggle() {
    // DO YOUR CHANGES HERE
    // hint: use set method to do the required changes
    
    //console.log(this.user);
    //this.user = !this.user
  }

  static get properties() {
    return {
      prop1: {
        type: String,
        value: 'user',
      },
      user: {
        type: Object,
        value: function () {
          return { authorise: false}; // HINT: USE BOOLEAN VALUES TO HIDE THE MESSAGE BY DEFAULT
        },
        notify: true,
      },
    };
  }
}

window.customElements.define('display-message', DisplayMessage);

I tried thinking for like hours, but couldn't solve. The requirement her is on clicking the button, the click handler toggle should change the value of authorize in user property to true. And on clicking again to false and so on. I need to use set method within toggle method. I'm not getting how to do this. Please help me on this.

Thanks in advance.

Answer 1

Why use a library/dependency for such a small component, that can be done with native code

<display-message id=Message name=Cr5>You are authorized</display-message>
<script>
  customElements.define("display-message", class extends HTMLElement {
    static get observedAttributes() {
      return ["name", "authorized"]
    }
    connectedCallback() {
      this.innerHTML = `<h2>Hello <span>${this.getAttribute("name")}</span></h2><button>Toggle message</button><br><div style=display:none>${this.innerHTML}</div>`;
      this.querySelector('button').onclick = () => this._toggle();
    }
    _toggle(state) {
      let style = this.querySelector('div').style;
      style.display = state || style.display == "none" ? "inherit" : "none";
      this.toggleAttribute("authorized", state);
      console.log(Message.name, Message.authorized);
    }
    get name() { return this.getAttribute("name") }
    set name(value) {
      this.querySelector('span').innerHTML = value;
      this.setAttribute("name", value);
    }
    get authorized() { return this.hasAttribute("authorized")   }
    set authorized(value) { this._toggle(value) }
    
    attributeChangedCallback(name, oldValue, newValue) {
      if (oldValue) this[name] = newValue;
    }
  })
  Message.name = "Cr5";
  Message.authorized = true;
</script>

Answer 2

class DisplayMessage extends PolymerElement {
    static get template() {
        return html`
        <style>
            :host {
                display: block;
            }
        </style>

        <h2>Hello [[prop1]]!</h2>
        <button on-click="toggle">Toggle Message</button> <br />
        <template is="dom-if" if="{{user.authorise}}">
            <br />
            <span>I should now display message.</span>
        </template>
        `;
    }
    toggle() {
        if(this.user.authorise==false)
        {
            this.set('user.authorise', true);
        }
        else
        {
            this.set('user.authorise', false);
        }
    }
    static get properties() {
        return {
            prop1: {
                type: String,
                value: 'user',
            },
        user: {
            type: Object,
            value: function () {
                return { authorise: false };
            },
        },
        };
    }
}

window.customElements.define('display-message', DisplayMessage);