Search code examples
angularlit-element

Pass parameter from Angular component to custom element

I am mergin an Angular app with an js (Lit element) app and I need to pass paramaters from the angular component to the custom element in the JS app. I cannot seem to pass the actual value, but only the name of the variable I am trying to send. Any help?

@Input()
  public name: string = 'hurra';

<fund-view value=name></fund-view>

It comes out in the fund-view custom element attributes as I recieve it like this

 static get properties() {
    return {
      name: {
        type: String
      }
 }

This is what I get: nodeValue: "name"

I even tried putting multiple brackets around the value, but then I receive absolute nothing.

How do I pass the actual value?

Solution

  • To pass a property to a lit-element you need to use . before the property name.

    Assuming fund-view is a lit-element, property assignment should look like this:

    <fund-view .someProperty="propertyValue"></fund-view>

    Reference: https://open-wc.org/guides/knowledge/attributes-and-properties/#templating