title: Angular 5: how to show return value from .ts to view
body: <p>In simple HTML and JS, the below code is working well.</p>
  
  <p><strong>// main.js</strong></p>
  
  <pre><code>function videoHTML(videoNumber, trackName, trackType = 'srt') {
      return '&lt;video id="video-js" class="video-js vjs-default-skin" ' +'controls preload="auto" width="640" height="264" ' +'poster="img/' + videoNumber + '.jpg"' +
          'data-setup=\'{"example_option":true}\'&gt;' +
          '&lt;source src="videos/' + videoNumber + '.mp4" type="video/mp4" /&gt;' +
          '&lt;track id="video-srt" kind="captions" src="subs/' + trackName + '.' + trackType + '" srclang="it" label="Italian" default&gt;&lt;/track&gt;' +
          '&lt;/video&gt;';
  }
  </code></pre>
  
  <p><strong>// index.html</strong></p>
  
  <pre><code>&lt;script type="text/javascript" src="js/main.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>But in Angular 5, how can I return the value from ts file to html view file? See below:</p>
  
  <p><strong>// abc.component.ts</strong></p>
  
  <pre><code>function videoHTML(videoNumber, trackName, trackType = 'srt') {
          return '&lt;video id="video-js" class="video-js vjs-default-skin" ' +'controls preload="auto" width="640" height="264" ' +'poster="img/' + videoNumber + '.jpg"' +
              'data-setup=\'{"example_option":true}\'&gt;' +
              '&lt;source src="videos/' + videoNumber + '.mp4" type="video/mp4" /&gt;' +
              '&lt;track id="video-srt" kind="captions" src="subs/' + trackName + '.' + trackType + '" srclang="it" label="Italian" default&gt;&lt;/track&gt;' +
              '&lt;/video&gt;';
      }
  </code></pre>