title: Renderer2 does not render SVG element while using d3 js - Angular 4
body: <p>After going through the below link </p>
  
  <p><a href="https://stackoverflow.com/questions/33385500/using-d3-js-with-angular-2/43617004">Using D3.js with Angular 2</a></p>
  
  <p>I understood that we should not be manipulating DOM directly. So I started exploring to use Renderer2 of angular 4.</p>
  
  <p>So I started to write some code to add <strong>svg</strong> to DOM. Below are the snippets of my code. </p>
  
  <p><strong>HTML code</strong></p>
  
  <pre><code>&lt;div class="row"&gt;
   &lt;div class="col-12"&gt;
     &lt;div #myBarGraph id="host"&gt;&lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Component.ts</strong></p>
  
  <pre><code>export class BarGraphComponent implements OnInit {
   host:any;
   svg:any;
   @ViewChild('myBarGraph') myBarGraph:ElementRef;
  
   constructor(private renderer:Renderer2) { }
  
   ngOnInit() {
    //some logic
   }
  
   // called on some drop down selection
   teamSelection(){
    //some logic
     this.host = this.mybarGraph.nativeElement;
     buildSVG();
   }
  
   buildSVG():void {
     this.svg = this.renderer.createElement('svg');
     this.renderer.setAttribute(this.svg,'width','600');
     this.renderer.setAttribute(this.svg,'height','400');
     this.renderer.setAttribute(this.svg,'background-color','blue');
     this.renderer.appendChild(this.host,this.svg); 
   }
  }
  </code></pre>
  
  <p>The above code is able to add the svg element to the DOM. But to my surprise, it actually not displaying the svg element!.</p>
  
  <p>I did refer to the following questions </p>
  
  <ol>
  <li><a href="https://stackoverflow.com/questions/46787368/angular2-renderer-svg-rect-is-rendered-but-not-showing-in-page">Angular2 Renderer: Svg rect is rendered but not showing in page</a></li>
  <li><a href="https://stackoverflow.com/questions/39211845/angular2-does-not-render-svg-in-runtime">Angular2 does not render SVG in runtime</a></li>
  </ol>
  
  <p>But I couldn't find the proper answer so far.</p>
  
  <p>Below is a screenshot of the problem
  <a href="https://i.stack.imgur.com/8SMQ0.png" rel="noreferrer"><img src="https://i.stack.imgur.com/8SMQ0.png" alt="problem"></a></p>
  
  <p>As you can see above, svg is present in DOM, but it is not displayed in web page. 
  Any help would be much appreciated.</p>