title: Binded value on component.html {{cssURL}}, but the CSS is not loading
body: <p>I am trying to call the CSS from a variable instead of hard coding it.</p>
  
  <p>Below in my <code>pageview.html</code></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html &gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Full screen sections with CSS&lt;/title&gt;
        &lt;!--&lt;link rel="stylesheet" href="./assets/files/css/style.css"&gt;--&gt;
        {{template_skeleton_top_param}} 
  &lt;/head&gt;
  
  &lt;body&gt;
  ...//my content
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The value of <code>{{template_skeleton_top_param}}</code> is <code>&lt;link rel="stylesheet" href="./assets/files/css/style.css"&gt;</code></p>
  
  <p>My <code>pageview.ts</code></p>
  
  <pre><code>ngOnInit() {
  this.template_skeleton_top_param = '&lt;link rel="stylesheet" href="./assets/files/css/style.css"&gt;';
  }
  </code></pre>
  
  <p>When calling from the variable, its not loading. If hard coding it, it's taking effect. In console.log(); the value of variable is also fine. I am unable to find the reason of not loading.</p>
  
  <h2>Edit 1</h2>
  
  <p>Pasting my entire component and made a video to give a clear picture of what's happening:</p>
  
  <pre><code>export var myValue:any = null;
  
  import { Component, OnInit, ElementRef,Renderer2,Inject } from '@angular/core';
  import { ActivatedRoute } from '@angular/router';
  import { DOCUMENT } from '@angular/platform-browser';
  
  declare var $: any; //intentional use of jQuery
  
  @Component({
    selector: 'app-editsection',
    templateUrl: './editsection.component.html',
    styleUrls: ['./editsection.component.css']
  })
  
  
  export class EditsectionComponent implements OnInit {
  public array_no1;
  public dataArray;
  public section_desc;
  public get_template_skeleton; 
  public template_skeleton_top_param;
  public template_skeleton_top_param_test;
  private contentEditable: boolean = false;
  
  section: {id: number};
  
    constructor(
      @Inject(DOCUMENT) private document: any,
      private route: ActivatedRoute,
    private elRef: ElementRef,
    private el: ElementRef,
    private rd: Renderer2
    ) { }
  
    ngAfterViewInit() {
    this.el.nativeElement.innerHtml;      
  }
  
    ngOnInit() {
      // insert the template code 
  this.get_template_skeleton  = JSON.parse(localStorage.getItem("templateType"));
  
  this.template_skeleton_top_param_test = this.get_template_skeleton['template_code2'];
  //console.log(this.template_skeleton_top_param_test);
  
  this.template_skeleton_top_param = '&lt;link rel="stylesheet" href="./assets/files/css/style.css"&gt;';
  console.log(this.template_skeleton_top_param);
  
  //this.document.body.innerHTML += this.get_template_skeleton.template_code2; //injecting HTML HERE
  //this.document.body.innerHTML += "saurabh";
  this.section = {id: this.route.snapshot.params['id']};
   var keys = Object.keys(localStorage).filter(function(key) {
    return /^section\d+$/.test(key);
  });
  
   var dataArray = keys.map(function(key) {
   return JSON.parse(localStorage.getItem(key));
  });
  
  for(var i=0;i&lt;dataArray.length;i++){
      var array_no = dataArray[i];
  }
   this.array_no1 = dataArray;
  let obj2 = this.array_no1.find(obj2 =&gt; obj2.id == this.section.id);
  this.section_desc = obj2.description;
  //this.document.getElementById("main-wrapper").innerHTML = this.section_desc;  //injecting HTML HERE
  //this.document.getElementById("main-wrapper").innerHTML += "abc";
    }
  
   selectDiv() {
       //create a new HTMLElement from nativeElement
      var hElement: HTMLElement = this.elRef.nativeElement;
  
      //now you can simply get your elements with their class name
    // var allDivs = hElement.getElementsByClassName('container')[0];
  var getSection = document.getElementById("main-wrapper").innerHTML;
  
  
      console.log("hii");
    //  console.log(allDivs);
      console.log(getSection);
     // $("h1[contenteditable='false']").attr('contenteditable', true)
     this.contentEditable = true;
  
    }
  
    DontEdit(){
      this.contentEditable = false;
    }
  
    //for clone
    clone(){
      console.log("Clone function here");
    }
     button2(){
      console.log("button2 function here");
    }
  
  
    // code for right click context menu
    rightPanelStyle: Object = {};
  
    detectRightMouseClick($event) {
      // disabling the default browser window which comes on right click
      document.addEventListener('contextmenu', event =&gt; event.preventDefault());
  
         if($event.which === 3) {
              this.rightPanelStyle = {'display':'block','left':$event.clientX + 'px','top':$event.clientY + 'px'};
              return false;
         }
    }
  
    closeContextMenu() {
        this.rightPanelStyle = {'display':'none'};
    }
  
  }
  </code></pre>
  
  <p>Video link: <a href="http://youtu.be/G_dAxijYRGY?hd=1" rel="nofollow noreferrer">http://youtu.be/G_dAxijYRGY?hd=1</a></p>