title: Reuse a component multiple times on different instances
body: <p>I have searched real good before publishing that question,<br/>
  I found questions similar to my question but no solution was solving my problem.<br/></p>
  
  <p>I have created angular component of "styled" radio button.<br/>
  I need to reuse it multiple times on a different instances.</p>
  
  <p>please take a look at this image:</p>
  
  <p><a href="https://i.stack.imgur.com/NhAkw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NhAkw.png" alt="enter image description here"></a></p>
  
  <p><strong>How can i achieve multiple independent instance behavior?</strong> </p>
  
  <p><em>A summary of the relevant parts in my code:</em></p>
  
  <blockquote>
    <p>Parent component .ts file:</p>
  </blockquote>
  
  <pre><code>    import { Component, ElementRef, ViewChild, AfterViewInit  } from '@angular/core';
      import { TxtZoneComponent } from './txtzone/txtzone.component';
      import { EditorDirective } from './txtzone/editor.directive';
      import { RadioButtonComponent } from './CustomControls/RadioButton';
  
      @Component({
          selector: 'my-app',
          templateUrl: 'app/app.component.html',
          styleUrls: ['app/App.css'],
  
      })
      export class AppComponent {
          public Myheader: string = "Line Breaker Web Application"
          public RadButtonBackColor: string = "rgb(50,50,50)"
          @ViewChild(EditorDirective) vc: EditorDirective;
          constructor()
          {
  
          }
  
  }
  </code></pre>
  
  <blockquote>
    <p>Parent component .html file:</p>
  </blockquote>
  
  <pre><code>&lt;div&gt;&lt;MyRadBtn [Description]="'Break Word'" [BackColor]="RadButtonBackColor"&gt;Loading...&lt;/MyRadBtn&gt;&lt;/div&gt;
  &lt;div&gt;&lt;MyRadBtn [Description]="'SQL Mode'" [BackColor]="RadButtonBackColor"&gt;Loading...&lt;/MyRadBtn&gt;&lt;/div&gt;
  </code></pre>
  
  <blockquote>
    <p>RadioButton component .ts file:</p>
  </blockquote>
  
  <pre><code>import { Component, Input, OnChanges, NgModule } from '@angular/core';
  import { FormsModule } from '@angular/forms';
  //import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  
  @Component({
      selector: 'MyRadBtn',
      templateUrl: 'app/CustomControls/RadioButton.html',
      styleUrls: ['app/CustomControls/RadioButtonStyleSheet.css'],
  })
  
  
  
  export class RadioButtonComponent
  {
  
  
      @Input() BackColor: string = "rgb(50,50,50)";
      @Input() Description: string;
      constructor()
      {
  
      }
  
      ngOnChanges() {
  
      }
  
      clicked(): void
      {
          alert(this.Description);
      }
  }
  </code></pre>
  
  <blockquote>
    <p>RadioButton .html file:</p>
  </blockquote>
  
  <pre><code>&lt;div class="breakwordcont" [ngStyle]="{'background-color': BackColor}"&gt;
      &lt;div class="desc"&gt;&lt;span&gt;{{Description}}&lt;/span&gt;&lt;/div&gt;
      &lt;div class="control"&gt;
          &lt;div class="slideOne"&gt;
              &lt;input type='checkbox' value='None' id='slideOne' name='check' (click)="clicked()" /&gt;
              &lt;label for="slideOne"&gt;&lt;/label&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <blockquote>
    <p>RadioButton .css file:</p>
  </blockquote>
  
  <pre><code>input[type=checkbox] {
      visibility: hidden;
  }
  
  
  .slideOne {
      width: 50px;
      height: 10px;
      background: #333;
      margin: 5px auto;
  
      -webkit-border-radius: 50px;
      -moz-border-radius: 50px;
      border-radius: 50px;
      position: relative;
  
      -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
      -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
      box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
  }
  
  .slideOne label {
      display: block;
      width: 16px;
      height: 16px;
  
      -webkit-border-radius: 50px;
      -moz-border-radius: 50px;
      border-radius: 50px;
  
      -webkit-transition: all .4s ease;
      -moz-transition: all .4s ease;
      -o-transition: all .4s ease;
      -ms-transition: all .4s ease;
      transition: all .4s ease;
      cursor: pointer;
      position: absolute;
      top: -3px;
      left: -3px;
  
      -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
      -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
      box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
      background: #fcfff4;
  
      background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
      background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
      background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
      background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
      background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
  }
  
  .slideOne input[type=checkbox]:checked + label {
      left: 37px;
  }
  
  .breakwordcont
  {
      width:90%;
      font-size: 0.7em;
  
  }
  
  .desc {
  
      width:65px;
       height:30px;
      margin: 5px auto;
      margin-left:3px;
      display:inline-block;
      height:50%;
      float:left;
  }
  
  .control {
      width:60px;
      height:20px;
      display:inline-block;
      float:right;
  }
  </code></pre>
  
  <p><strong>EDIT FOR FUTURE VIEWERS WITH THE SAME ISSUE</strong><br/></p>
  
  <hr>
  
  <p>based on @deek answer this are the relevant changes in my fixed code:<br/><br/>
  1. adding ID property to radioButton .ts file:</p>
  
  <pre><code>export class RadioButtonComponent
  {
      @Input() ID: string;
  // ... rest of class definitions...
  }
  </code></pre>
  
  <ol start="2">
  <li><p>Passing the ID for each radio button from the parent component:</p>
  
  <pre><code>  &lt;div&gt;&lt;MyRadBtn [ID]="'id-one'" [Description]="'Break Word'" [BackColor]="RadButtonBackColor"&gt;Loading...&lt;/MyRadBtn&gt;&lt;/div&gt;
    &lt;div&gt;&lt;MyRadBtn [ID]="'id-two'" [Description]="'SQL Mode'"  [BackColor]="RadButtonBackColor"&gt;Loading...&lt;/MyRadBtn&gt;&lt;/div&gt;
  </code></pre></li>
  <li><p>binding the id of the input to the css class:</p>
  
  <pre><code> &lt;div class="breakwordcont" [ngStyle]="{'background-color': BackColor}"&gt;
       &lt;div class="desc"&gt;&lt;span&gt;{{Description}}&lt;/span&gt;&lt;/div&gt;
       &lt;div class="control"&gt;
           &lt;div class="slideOne"&gt;
               &lt;input type='checkbox' value='None' id={{ID}} name='check' /&gt;
               &lt;label for={{ID}} (click)="clicked()"&gt;&lt;/label&gt;
           &lt;/div&gt;
       &lt;/div&gt;
   &lt;/div&gt;
  </code></pre></li>
  </ol>