CODEWITHSUNDEEP
javascriptangularangular-elements
Fran
Fran

Reputation: 13

My angular 7 web component @Input<boolean> doesn't work when I bind a false value

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.

Upvotes: 1

Views: 600

Answers (1)

user12976003
user12976003

Reputation: 36

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.

Upvotes: 2

Related Questions