Angular Web Components - @Input not receiving the value

Question

I've got a problem where I've created a Angular Web Component (or Angular Web Element) and I'm trying to get a value passed into the component via a @Input(). This value is just not pulling through but I've made it all the same as any other @Input() in Angular. I'm very confused.

The code looks like this:

component.ts

@Input() displayGroup: string;

ngOnInit() {
   console.log(this.displayGroup);
}

using element

<my-custom-element displayGroup="test"></my-custom-element>

Why would the value from the Input? The value displayed in the console is: undefined

Newt · Accepted Answer · 2020-06-11 10:22:32Z

Angular Web Components work slightly differently from normal Angular components.

As you can see from Angular's official documentation here

The creation API parses the component looking for input properties, and defines corresponding attributes for the custom element. It transforms the property names to make them compatible with custom elements, which do not recognize case distinctions. The resulting attribute names use dash-separated lowercase. For example, for a component with @Input('myInputProp') inputProp, the corresponding custom element defines an attribute my-input-prop.

This means that in the HTML you need the following:

<my-custom-element display-group="test"></my-custom-element>

Any @Input() variables that you declare, would need to be kebab-lower-case for the input where you will be using it

Collectives™ on Stack Overflow

Angular Web Components - @Input not receiving the value

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related