如何从angular应用程序向javascript web组件提供输入

Question

I have create JavaScript WebComponent using HTMLElement class. And build it using npx webpack. Now trying to use that component in Angular 7 project but when I try to provide input from angular by creating a variable it doesn't work but when I give direct string input it works. Below is my web component. Basically a loader with show/hide input.

if (typeof require !== 'undefined') {
    require('../css/styles.css');
}

class Loader extends HTMLElement {
    constructor() {
        super();
        this.initialized = false
    }

    static get observedAttributes() {
        return ['data-input'];
    }


    attributeChangedCallback(name, oldValue, newValue) {
        console.log(name, newValue);

        if (name == 'data-input') {
            if (newValue == 'show' && this.shadowRoot) {
                this.shadowRoot.getElementById('my-component').className = 'show';
            } else if (this.shadowRoot) {
                this.shadowRoot.getElementById('my-component').className = 'hide';
            }
        }
        if (!this.initialized) {
            this.buildElement();
            this.initialized = true
        }
    }

    buildElement() {
        const shadowRoot = this.attachShadow({mode: 'open'});
        let style = document.createElement('style');
        let cssFile = ''
        if (typeof require !== 'undefined') {
            cssFile = require('../css/styles.css');
        }
        style.textContent = cssFile; 
        shadowRoot.appendChild(style);
        shadowRoot.appendChild(this.createElement());      
    }

    createElement() {
        const container = document.createElement("DIV");
        container.id = "my-component";
        container.className = "hide";
        const loader = document.createElement("DIV");
        loader.className = "loader";
        container.appendChild(loader);
        const locker = document.createElement("DIV");
        locker.className = "locker";
        container.appendChild(locker);
        return container;
    }
}

window.customElements.define('my-component', My);

This works.

<my-component data-input="show"></my-component>

But this do not work.

<my-component data-input="{{showHideInput}}"></my-component>

Answer 1

Did you try:

<my-component data-input={{showHideInput}}></my-component> ?

Answer 2

https://alligator.io/angular/using-custom-elements/添加集合并使属性工作。