'Angular - render variable in to a custom web element

i am in integrating with a third-party review system and one of the ways to do this is like the following so in my component html file i have this

<reevoo-product-badge 
  variant='PDP' 
  SKU="1102946732"
  id="reevoo_badge_pdp"
  reevoo-click-action="no_action">
 </reevoo-product-badge>

and this works fine problem is the sku needs to be dynamic and i have access to this in my component ts but when i try to pass it as you normally would it breaks how do i get around this?

<reevoo-product-badge 
  variant='PDP' 
  [SKU]="productCode"
  id="reevoo_badge_pdp"
  reevoo-click-action="no_action">
</reevoo-product-badge>

angular

Solution 1:^[1]

You can pass it as you did in the second example. It won't break. When you put the attribute in a square bracket [SKU]. It will read the value from the component file. Whenever the productCode changes, it will reflect in the reevoo-product-badge component.

Solution 2:^[2]

for anyone who has similar issues the solution is to use DomSanitizer in the component

   this.reevooHTML_TAG = this.domSanitizer.bypassSecurityTrustHtml(`
    <reevoo-product-badge 
        variant='PDP' 
        SKU="${this.productCode}"
        id="reevoo_badge_pdp"
        reevoo-click-action="no_action">
    </reevoo-product-badge>
  `)

then in the html

<div [innerHTML]="reevooHTML_TAG"></div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	rohithpoya
Solution 2	Jacob Kenyon

'Angular - render variable in to a custom web element

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]