title: How Do I add this javascript and HTML code into an angular project? and can i render html from javascript function in angular?
body: <p><strong>How Do I add this javascript and HTML code into an angular project ?</strong>
  I have placed the func.js in a src folder in my angular project and in my app.component.ts file 
  where I tried to import and use ngAfterViewInit() to load and use the javascript functions</p>
  
  <p>These are the javascript and html files I am trying to add to the angular web app: </p>
  
  <blockquote>
    <p><strong>funcs.js</strong></p>
  </blockquote>
  
  <pre><code>const uName = 'admin';
  const uPass = '12345';
  const endpoint = 'http://11.11.111.241:8000';
  const resource = {
      questionnaire: 'Questionnaire',
      valueset: 'ValueSet'
  }
  
  //get questionnaire
  var url = 'http://cihi.ca/fhir/irrs/Questionnaire/abc-abc-community-on';
  var quesJson = getData(resource.questionnaire, '?url=' + url);
  quesJson = quesJson.entry[0].resource
  // saveJsonToFile(quesJson, 'irrsQuesJson');
  var copy = $.extend(true, {}, quesJson);
  //convert to lhc form
  var lformsQ = LForms.Util.convertFHIRQuestionnaireToLForms(quesJson, 'STU3')
  // saveJsonToFile(lformsQ, 'lFormJson');
  //prepare valuesets
  const vsArray = createValueSetData();
  //add value sets
  injectValueSet(lformsQ);
  // saveJsonToFile(lformsQ, 'lFormValueSetInjected');
  // Add the form to the page
  var options = { 'prepopulate': true };
  LForms.Util.addFormToPage(lformsQ, 'formContainer', options);
  
  
  
  
  
  /////////////////////////////////////////////////////////////////////////////////////////////////////////////
  function getData(res, param, log) {
      var data = null;
      var url = endpoint + '/' + res + param;
      $.ajax({
          accepts: {
              json: 'application/fhir+json',
              xml: 'application/fhir+xml'
          },
          dataType: 'json',
          type: 'GET',
          url: url,
          async: false,
          success: function (response) {
              data = response;
              if (log)
                  console.log('getData: SUCCESS - "' + url + '"');
          },
          beforeSend: function (xhr) {
              xhr.setRequestHeader("Authorization", "Basic " + btoa(uName + ":" + uPass));
          },
          error: function (err) {
              if (log)
                  console.error('getData: FAILED - "' + url + '"')
          }
      });
  
      return data;
  }
  
  
  
  //recursively inject valueset into lhc json
  function injectValueSet(lhcJson) {
      if (lhcJson &amp;&amp; 'items' in lhcJson) {
          lhcJson.items.forEach(e =&gt; {
              injectValueSet(e);
          });
      } else {
          if ('answerValueSet' in lhcJson &amp;&amp; 'reference' in lhcJson.answerValueSet) {
              lhcJson['answers'] = vsArray[lhcJson.answerValueSet.reference];
          }
      }
  
  }
  
  //save form
  function save() {
      var quesResp = LForms.Util.getFormFHIRData('QuestionnaireResponse', 'STU3', '#formContainer');
      saveJsonToFile(quesResp, 'questionnaireResponse' + '-' + new Date().getTime());
      // var newLform = LForms.Util.mergeFHIRDataIntoLForms('QuestionnaireResponse', quesResp, lformsQ, 'STU3');
      // LForms.Util.addFormToPage(newLform, 'formContainer2');
  }
  
  //open file
  function openQues() {
      var file = $('#file1')[0].files[0];
  
      const fileReader = new FileReader();
      fileReader.onload = event =&gt; {
          var data = JSON.parse(event.target.result);
          var lform = LForms.Util.mergeFHIRDataIntoLForms('QuestionnaireResponse', data, lformsQ, 'STU3');
          injectValueSet(lformsQ);
          LForms.Util.addFormToPage(lform, 'formContainer');
      };
      fileReader.onerror = error =&gt; console.error("Error loading file!");
      fileReader.readAsText(file, "UTF-8");
  }
  
  // get valueSet count
  function getValueSetCount() {
      var count = 0;
  
      var response = getData(resource.valueset, '?_summary=count');
      if (response) {
          count = response.total;
      }
  
      return count;
  }
  
  //get all valueSets id
  function getValueSetIds() {
      var ids = [];
  
      var count = getValueSetCount();
      var response = getData(resource.valueset, '?_count=' + count + '&amp;_element=id');
      if (response) {
          if ('entry' in response &amp;&amp; response.entry.length &gt; 0) {
              response.entry.forEach(e =&gt; {
                  if ('resource' in e &amp;&amp; 'id' in e.resource &amp;&amp; 'url' in e.resource) {
                      ids.push({
                          'id': e.resource.id,
                          'url': e.resource.url
                      });
                  }
              });
          }
      }
  
      return ids;
  }
  
  //create valueSet array for form fields
  function createValueSetData() {
      var data = {}, dataValueSet, failedIds;
  
      var ids = getValueSetIds();
      if (ids) {
  
          failedIds = [];
  
          ids.forEach(idSet =&gt; {
              var response = getData(resource.valueset, '/' + idSet.id + '/$expand');
              if (response &amp;&amp; 'expansion' in response
                  &amp;&amp; 'contains' in response.expansion
                  &amp;&amp; response.expansion.contains.length &gt; 0) {
  
                  dataValueSet = [];
                  response.expansion.contains.forEach(e =&gt; {
                      dataValueSet.push({
                          'text': e.code + ' - ' + e.display,
                          'code': e.code
                      });
                  });
  
                  data[idSet.url] = dataValueSet;
              } else {
                  failedIds.push(idSet.id);
              }
          });
  
          if (failedIds.length &gt; 0) {
              console.error("Failed fetching valueSets for the following IDs: \n Count: "
                  + failedIds.length + "\n" + failedIds);
          }
      }
  
      return data;
  }
  
  //save json to file
  
  function saveJsonToFile(json, fileName) {
      var textToSave = JSON.stringify(json);
      var data = new Blob([textToSave], { type: 'text/plain' });
      var textFileURL = window.URL.createObjectURL(data);
  
      var hiddenElement = document.createElement('a');
      hiddenElement.href = textFileURL;
      hiddenElement.target = '_blank';
      hiddenElement.download = fileName + '.txt';
      hiddenElement.click();
  }
  
  
  
  **Html file :**
  
  
      &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;link href="https://clinicaltables.nlm.nih.gov/lforms-versions/17.3.2/styles/lforms.min.css" media="screen"
          rel="stylesheet" /&gt;
      &lt;link href="https://clinicaltables.nlm.nih.gov/autocomplete-lhc-versions/17.0.3/autocomplete-lhc.min.css"
          rel="stylesheet" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;button onclick="save()"&gt;
          Save QuestionnaireResponse
      &lt;/button&gt;
      &lt;input type="file" id="file1"&gt;
      &lt;button onclick="openQues()"&gt;
          Open QuestionnaireResponse
      &lt;/button&gt;
      &lt;div id="formContainer"&gt;&lt;/div&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://clinicaltables.nlm.nih.gov/lforms-versions/17.3.2/lforms.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://clinicaltables.nlm.nih.gov/lforms-versions/17.3.2/fhir/STU3/lformsFHIR.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://clinicaltables.nlm.nih.gov/autocomplete-lhc-versions/17.0.3/autocomplete-lhc.min.js"&gt;&lt;/script&gt;
      &lt;script src="./index.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>