title: How to use multiple instances of same component in Angular 6?
body: <p>I have created a component with selector 'app-circle'. The HTML of the component contains an SVG for a circle. </p>
  
  <p>What I want is - to use multiple 'app-circle' in my main HTML to draw multiple circles with different attributes (say, color). But I cannot seem to be able to do this. Basically, my intention was to re-use 'app-circle' as multiple objects.</p>
  
  <p>(Please forgive me for being naive; I am new to angular &amp; web development and my experience is mainly in C#, which might be the reason for me to find difficulty in wrapping around angular/web concepts and way of working)</p>
  
  <p>Here is the code: -</p>
  
  <p>main.html</p>
  
  <pre><code>&lt;div class="diagram-wrapper"&gt;
    &lt;app-circle&gt;&lt;/app-circle&gt;
    &lt;app-circle&gt;&lt;/app-circle&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>circle.component.html</p>
  
  <pre><code>&lt;svg class="range" height="100" width="100"&gt;
    &lt;circle class="circle" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>circle.component.ts</p>
  
  <pre><code>import { Component, OnInit, AfterViewInit } from '@angular/core';
  
  @Component({
              selector: 'app-circle',
              templateUrl: './circle.component.html',
              styleUrls: ['./circle.component.scss']
            })
  export class CircleComponent implements OnInit, AfterViewInit {
  
  constructor() { }
  
  ngOnInit() { }
  
  ngAfterViewInit() {
   // Circle logic (fill colors, etc.)
  }
  </code></pre>