Make difference between instances of same component in angular2
<p>I just started to learn Angular 2 and I have a question about components. I have created a component named "dropdownComponent" that generates dropdown components. but when I use this component multiple times I dont know how to make difference between instances of one component.drop-down id='1'>drop-down id='2'>
how can I set something like id to each instance and find each component by id, so I can send data or call function of each component separately.
thanks</p>

<pre><code>     this this my component
    import { Component, Input, OnInit } from '@angular/core';
    import {SelectComponent} from 'ng2-select';

    import { Service } from '../../../service/index';

    interface singleselectitem {
      Value: string;
    }

   @Component({
selector: 'singleselect',
   templateUrl: 'app/home/select/select/singleselect.html',
   providers: [SelectComponent]
 })
 export class singleselectComponent {

@Input() calleditems: string;
public items: Array&lt;string&gt; = [];
//items: singleselectitem[] = [];
selecteditem: singleselectitem;
constructor(private service: Service, private select: SelectComponent) {
    this.select.items = [];
}

ngOnInit() {
    if (this.calleditems == 'ArchiveList')
        this.GetArchiveList();
}

GetArchiveList() {
    this.service.callservice('get', 'basic/getArchiveList', '').subscribe(
        data =&gt; {
            for (var i = 0; i &lt; data.length; i++) {
                this.items.push(data[i].Value);
            }
        },
        err =&gt; {

        });
}

private value: any = {};
private _disabledV: string = '0';
private disabled: boolean = false;

private get disabledV(): string {
    return this._disabledV;
}

private set disabledV(value: string) {
    this._disabledV = value;
    this.disabled = this._disabledV === '1';
}

public selected(value: any): void {
    console.log('Selected value is: ', value);
}

public removed(value: any): void {
    console.log('Removed value is: ', value);
}

public typed(value: any): void {
    console.log('New search input: ', value);
}

public refreshValue(value: any): void {
    this.value = value;
}
}



    //template of my component
   &lt;div style="width: 300px; margin-bottom: 20px;"&gt;
&lt;ng-select [allowClear]="true"
           [items]="items"

           (data)="refreshValue($event)"
           (selected)="selected($event)"
           (removed)="removed($event)"
           (typed)="typed($event)"
           &gt;
&lt;/ng-select&gt;
</code></pre>

<p></p>

<pre><code>      //host component
     import { Component, OnInit } from '@angular/core';
     import { Router } from '@angular/router';
     import {SelectComponent} from 'ng2-select';

      import { CarouselComponent } from '../home/slider/index';
      import { Service } from '../service/index';
       import {singleselectComponent} from './select/select/singleselect';

       @Component({
moduleId: module.id,
templateUrl: './home.component.html',
providers: [CarouselComponent, singleselectComponent, SelectComponent] // means we have used csscarousel tags in home.html
       })



       export class HomeComponent implements OnInit {

private ArchiveList: any;

constructor(private service: Service, private router: Router, private singleselect: singleselectComponent) { }

ngOnInit() {
    if (this.service.GetToken() == null)
        this.router.navigate(['/login']);
}
    }


       template of host component
       &lt;div class="col-md-6 col-md-offset-3"&gt;
&lt;h1&gt;Home&lt;/h1&gt;
&lt;p&gt;&lt;a [routerLink]="['/login']"&gt;Logout&lt;/a&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;singleselect [calleditems]="'ArchiveList'"&gt;&lt;/singleselect&gt;
      &lt;singleselect [calleditems]="'ArchiveList1'"&gt;&lt;/singleselect&gt;
      &lt;div class="wrapper"&gt;
           &lt;css-carousel&gt;&lt;/css-carousel&gt;
      &lt;/div&gt;
</code></pre>