CODEWITHSUNDEEP
angularbindingnative-web-component
Nils Brocke
Nils Brocke

Reputation: 21

How do i bind a URL to a web component's attribute

i have a web component (wrapped react-app) that needs to receive a file and another string-parameter. I tried embedding it in my angular app (angular 18) the way it was described here, which worked. Except i can not get the web component to receive the attribute values by binding it from angular.

The component takes the values by reading them with this.getAttribute('language'), which works for hardcoded values.

I tried binding the URL directly as a string to the component:

<my-component [attr.fileUrl]="fileUrl" [attr.lang]="languageIsoCode"></my-component>

This added the attribute to the DOM, but the component doesn't seem to be able to read it.

I also tried using a sanitized SafeUrl:

<my-component [attr.fileUrl]="domSanitizer.bypassSecurityTrustResourceUrl(fileUrl)" [attr.lang]="languageIsoCode"></my-component>

This way it writes the error "SafeValue must use [property]=binding:..." into the attribute. If i remove the "attr" in the binding however, it removes the attribute entirely from the DOM element.

Only if i hardcode the URL directly, it works.

<my-component fileUrl="https://some.url.com" [attr.lang]="languageIsoCode"></my-component>

The same is the case for the second "lang" attribute, which also can only be hardcoded.

What am i missing?

Upvotes: -1

Views: 46

Answers (1)

gdoura mohamed
gdoura mohamed

Reputation: 153

Instead of using [attr.fileUrl], try passing the URL and language code as properties directly:

<my-component [fileUrl]="fileUrl" [lang]="languageIsoCode"></my-component>

Upvotes: 0

Related Questions