1

How to pass html tag from parent to child component in LWC ?

Parentcmp.js

 msg =''
 init()
  {
   this.msg =`<h1>Watch out!</h1><p>Unauthorized hockeying can result in penalties of up to minutes.</p>`
   }

<c-child message={msg}></c-child>

ChildCmp.js

@api Message;

ChildHtml

 <div>{message}</div>


  Result :<h1>Watch out!</h1><p>Unauthorized hockeying can result in penalties of up to minutes.</p>
  Expected Result :**Watch out! Unauthorized hockeying can result in penalties of up to minutes** 

Not the tag .

How to dynamic binding Html template string value in LWC ?

1 Answer 1

1

Use <slot></slot> to pass HTML markup from parent to child Lightning Web Component.

Child

<template>
    <h4>This is a child component</h4>
    <slot name="slot1"></slot>
    <slot name="slot2"></slot>
</template>

Parent

<template>
    <c-slot-child>
        <div slot="slot1">
            Hello
        </div>
        <div slot="slot2">
            <span>
                <p>
                    World!
                </p>
            </span>
        </div>
    </c-slot-child>
</template>

https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.create_components_slots

3
  • or lightning-formatted-rich-text Feb 1, 2022 at 19:00
  • Please do not solicit code from people, Saroj has provided you with sample code and links towards the docs. Please make sure you read and follow the docs. SFSE is not a free coding service. thanks
    – glls
    Feb 1, 2022 at 19:32
  • Slots is not working under IF:true tag . please suggest some ideas <div if:true={flag}><p slot="slot1"> Inside </p> </div>
    – New learn
    Feb 2, 2022 at 7:23

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .