Angular - render variable in to a custom web element-CodePudding

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>

CodePudding user response：

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.

CodePudding user response：

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>