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

Question

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.

Are you sure other inputs work? (name) Because on stackblitz it's not working. — Dino
– Dino, Commented Jul 22, 2019 at 16:55
Sorry, I updated it to a new stack project, @Dino, now it works (except for false). — Fran
– Fran, Commented Jul 22, 2019 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
– AndyD, Commented Jul 28, 2019 at 22:55

user12976003 · Accepted Answer · 2020-02-27 22:05:31Z

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.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related