1

I have setup an application which exports web components from angular 7 using angular custom-elements package. Everything works fine. I am able to bind anything, arrays, objects, strings from javascript using the element instance:

const table = document.createElement('my-table-element');
table.someInputProp = 'Works Great';
table.otherInput = ['my', 'working', 'array'];

The problem comes when I try to bind to a literal false value:

table.myBooleanInput = false

This doesnt change anything on the component @Input myBooleanInput = true The value is still true for ever. No matter how many times it changes to false.

I'am able to bind it as a truthy value which it renders just fine. The problem is only when using literal false.

Here is a working reproduction of this issue: https://stackblitz.com/edit/angular-elements-official-example-q4ueqr

Thanks in advance.

PS: If I use the web components from within another angular app, the binding works fine.

Fran
  • 13
  • 4
  • Are you sure other inputs work? (name) Because on stackblitz it's not working. – Dino Jul 22 '19 at 16:55
  • Sorry, I updated it to a new stack project, @Dino, now it works (except for false). – Fran Jul 22 '19 at 17:16
  • It may help to debug if you use getters and setters. Also giving the custom element definition a different element name to the component itself can be useful – AndyD Jul 28 '19 at 22:55

1 Answers1

2

I'm actually having this same issue. Was debugging it and there seems to be some code the @angular/elements (I'm using version 7.2.15) package which skips over setting properties on initialize when they evaluate to false.

/** Set any stored initial inputs on the component's properties. */
    ComponentNgElementStrategy.prototype.initializeInputs = function () {
        var _this = this;
        this.componentFactory.inputs.forEach(function (_a) {
            var propName = _a.propName;
            var initialValue = _this.initialInputValues.get(propName);
            if (initialValue) {
                _this.setInputValue(propName, initialValue);
            }
            else {
                // Keep track of inputs that were not initialized in case we need to know this for
                // calling ngOnChanges with SimpleChanges
                _this.uninitializedInputs.add(propName);
            }
        });
        this.initialInputValues.clear();
    };

As a workaround you could convert the flag to a string, wrap it in an object, or look at the element attributes from within the component.

user12976003
  • 36
  • 2