title: Angular - How to reference class variables in a component template?
body: <p>I'm quite new to Angular, so please forgive me if I use some wrong/weird terms in my question.</p>
  
  <p>I have this Angular component that calculates two different urls, based on user's inputs. Now, I would like to inject the calculated urls in the associated angular component, so that the final HTML would produce a div with the following behavior:
  - Loads with a static image (referenced by url2) in the background;
  - When clicked, an iframe (referencing url1) would be dynamically added as a child element of the main div</p>
  
  <p>See corresponding TypeScript code below (simplified to make it easier to read):</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { DomSanitizer } from '@angular/platform-browser';
  import { Store } from '@ngrx/store';
  
  @Component({
      selector: 'my-component-selector',
      template: `
          &lt;table  width="100%"&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      &lt;div class="ng-scope embed-responsive embed-responsive-16by9"&gt;
                          &lt;div class="embed-responsive-item" onclick="$('&lt;iframe&gt;',{src:'URL1 PLACEHOLDER',style:'border:0;width:100%;height:100%;',frameborder:0,allowfullscreen:true,scrolling:'no'}).appendTo(this);" style="background-image:url('URL2 PLACEHOLDER');background-size:contain;background-position:center center;background-repeat:no-repeat;cursor:pointer;"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      `
  })
  
  export class MyComponent implements OnInit{
  
      url1;
      url2;
  
      constructor(private store: Store&lt;State&gt;, private sanitizer: DomSanitizer) {
          this.url1 = 'https://my.url.com/remote?param1=10&amp;param2=20';
          this.url2 = 'https://my.url.com/remote?param1=30&amp;param2=40';
      }
  
      ngOnInit() {
          this.url1 = 'https://my.url.com/remote?param1=10&amp;param2=20';
          this.url2 = 'https://my.url.com/remote?param1=30&amp;param2=40';
      }
  }
  </code></pre>
  
  <p>Everything works fine if I write the two urls directly in the Angular component code (see URL1 PLACEHOLDER and URL2 PLACEHOLDER). However, what I am struggling with is trying to use the contents of the class variables "url1" and "url2" in the corresponding placeholders.</p>
  
  <p>I tried using "this.url1" and "this.url2", {{url1}} and {{url2}}, {{this.url1}} and {{this.url2}} and a few other options, including biding the variable content using something like "[src]" in the iframe code, but all of them end up in an error or the variable name itself being added to the resulting HTML code.</p>
  
  <p>Could someone please tell me how to make that reference?</p>
  
  <p>Thanks in advance!</p>