title: How to access variable value from ts file to html file using angular?
body: <p>front-layout.component.ts</p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-front-layout',
    templateUrl: './front-layout.component.html',
    styleUrls: ['./front-layout.component.css']
  })
  export class FrontLayoutComponent implements OnInit {
  
    host:any;
    constructor() { }
  
    ngOnInit(): void {
  
      this.host = &quot;http://localhost:4200&quot;;
  
    }
  
  }
  </code></pre>
  <p>front-layout.component.html</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;&lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0, user-scalable=0&quot;&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;'{{ host }}'/assets/front/css/bootstrap.min.css&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;'{{ host }}'/assets/front/plugins/select2/css/select2.min.css&quot;&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class=&quot;main-wrapper&quot;&gt;
          &lt;router-outlet&gt;&lt;/router-outlet&gt;
      &lt;/div&gt;
      &lt;script src=&quot;'{{ host }}'/assets/front/js/jquery-3.6.0.min.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>In the above code I simply declare <code>host</code> and try to access in my html component but it throw an error i.e. <code>src/app/component/front/front-layout/front-layout.component.ts:5:16 - error NG2008: Could not find stylesheet file ''{{ host }}'/assets/front/css/bootstrap.min.css' linked from the template.</code>. No idea why variable not working? Please help me.</p>
  <p>Thank You</p>