I have an html file for checkout where I want to show the widget which is coming from the database . Instead of displaying the widget it shows widget code. I have attached screenshot of the same. Thank you for the help in advance.
<div class="store-container-inner" data-bind="visible: canVisibleBlock(), variable: isVisibleStoreContainer">
<label class="pickup-store-label" ><span id="pickup-store" data-bind="i18n: 'Select Store'"></span></label>
<select name="pickup_store"
class="required-entry"
datascope="shippingAddress.pickup_store"
data-validate="{required:true}"
data-bind="
options: getStoreOption(),
optionsValue: 'value',
optionsText: 'label',
optionsCaption: $t('Select a Store To Pickup'),
value: storeOptionValue,
event: {change: changeStore(storeOptionValue)}">
</select><br>
<!-- ko if: isVisibleStoreInformation -->
<div id="show-address">
<div class="shipping-information-content">
<div class="store-name">
<strong data-bind="i18n: 'Store Name'"></strong>
<span data-bind="i18n: storeAddress().name"></span>
</div>
<div class="store-address">
<strong data-bind="i18n: 'Store Address'"></strong>
<address>
<span data-bind="i18n: storeAddress().street"></span>
<br/>
<span data-bind="i18n: storeAddress().city+','"></span>
<span data-bind="i18n: storeAddress().zipcode"></span>
<br/>
<span data-bind="i18n: storeAddress().state+','"></span>
<span data-bind="i18n: storeAddress().country"></span>
<br/>
<span data-bind="i18n: storeAddress().telephone"></span>
<span data-bind="i18n: storeAddress().latitude"></span>
</address>
<div class="store-map-url">
<button type="button" class="action action-auth-toggle" data-trigger="store-description">
<span data-bind="i18n: 'More about store >>'"></span>
</button>
<!-- ko if: storeAddress().storemapurl -->
<a target="_blank" class="" data-bind="attr: {href: storeAddress().storemapurl}"><span data-bind="i18n: 'View Store on Google Map >>'"></span></a>
<!-- /ko -->
</div>
<div data-bind="mageInit: {
'Magento_Ui/js/modal/modal':{
'type': 'popup',
'modalClass': 'store-dropdown',
'trigger': '(data-trigger=store-description)',
responsive: true,
innerScroll: true,
'responsive': true,
'buttons': ()
}}">
<div class="store-popup-address">
<div class="store-popup-image">
<img data-bind="attr: {'src': storeAddress().image, 'alt': storeAddress().name }" alt="" width="130" height="130"/>
</div>
<div class="store-popup-name">
<div class="store-title" data-bind="html: storeAddress().name"></div>
<div class="store-email"><strong><span data-bind="i18n: storeAddress().email"></span></strong></div>
<address>
<span data-bind="i18n: storeAddress().street"></span>
<br/>
<span data-bind="i18n: storeAddress().city+','"></span>
<span data-bind="i18n: storeAddress().zipcode"></span>
<br/>
<span data-bind="i18n: storeAddress().state+','"></span>
<span data-bind="i18n: storeAddress().country"></span>
<br/>
<a data-bind="attr: {'href': 'tel:' + storeAddress().telephone}, text: storeAddress().telephone" href="tel:storeAddress().telephone"><span data-bind="i18n: storeAddress().telephone"></span></a>
<br/>
<a data-bind="attr: {'href': storeAddress().websiteUrl}" target="_blank"><span>Website</span></a>
<span> | </span>
<a data-bind="attr: {'href': storeAddress().facebookUrl}" target="_blank"><span>Facebook</span></a>
<span> | </span>
<a data-bind="attr: {'href': storeAddress().twitterUrl}" target="_blank"><span>Twitter</span></a>
</address>
</div>
</div>
<div class="store-popup-description">
<div data-bind="html: storeAddress().description"></div>
<!-- ko if: storeAddress().storemapurl -->
<div class="store-map-url">
<a target="_blank" class="action primary" data-bind="attr: {href: storeAddress().storemapurl}"><span data-bind="i18n: 'View Store on Google Map'"></span></a>
</div>
<!-- /ko -->
</div>
</div>
</div>
</div>
</div>
<!-- /ko -->
This is the html file through which i am displaying the data.