I have one library that gives pharmacy related data and I want to integrate in Angular, they have simple JavaScript code as below:
$('div#rxContainer').WebRefill({
PharmacyId: "SOMEID",
PharmacyPhone: '555-555-5555',
AuthServiceUrl: 'https://auth.apps.scriptpro.com/', // url for authorization service
RefillServiceUrl: 'https://webrefill.apps.scriptpro.com/', // url for refill service
PaymentServiceUrl: 'https://payment.apps.scriptpro.com/', // url for payment service
ColorTheme: {
TitleBar: '#333300',
Background: '#D4D5C6',
BreadCrumb: '#6D6D4A',
BreadCrumbActive: '#4A4A21',
MainButton: '#333333',
SecondaryButton: '#6D6D4B',
RxContainerHeader: '#6D6D4A',
RxContainer: '#CD853F',
Title: '#333300',
EmphasisText: '#330000'
}
});
HTML: <div id="rxContainer"></div>
I’ve added required script in index.html
file:
<script src="scriptpro/Scripts/ScriptPro.WebRefill.js"></script>
NOTE: “SOMEID” in PharmacyId will be dynamic.
I have tried as below:
HTML: <div id="rxContainer"></div>
.ts file:
const element = document.getElementById('rxContainer');
if (element) {
element.innerHTML = 'Content Updated!';
element.WebRefill({
PharmacyId: '2215b3ae-3ad7-4c47-9bed-a7da9c4aa561',
RefillServiceUrl: 'https://webrefill.apps.scriptpro.com/',
AuthServiceUrl: 'https://auth.apps.scriptpro.com/',
PaymentServiceUrl: 'https://payment.apps.scriptpro.com/',
ColorTheme: {
TitleBar: '#333300',
Background: '#D4D5C6',
BreadCrumb: '#6D6D4A',
BreadCrumbActive: '#4A4A21',
MainButton: '#33333',
SecondaryButton: '#6D6D4B',
RxContainerHeader: '#6D6D4A',
RxContainer: '#CD853F',
Title: '#333300',
EmphasisText: '#33000'
}
});
this.cdRef.detectChanges();
}
But it shows an error
Property ‘WebRefill’ does not exist on type ‘HTMLElement’.