Make difference between instances of same component in angular2

Question

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

     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<string> = [];
//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 => {
            for (var i = 0; i < data.length; i++) {
                this.items.push(data[i].Value);
            }
        },
        err => {

        });
}

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
   <div style="width: 300px; margin-bottom: 20px;">
<ng-select [allowClear]="true"
           [items]="items"

           (data)="refreshValue($event)"
           (selected)="selected($event)"
           (removed)="removed($event)"
           (typed)="typed($event)"
           >
</ng-select>

      //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
       <div class="col-md-6 col-md-offset-3">
<h1>Home</h1>
<p><a [routerLink]="['/login']">Logout</a></p>
      </div>
      <singleselect [calleditems]="'ArchiveList'"></singleselect>
      <singleselect [calleditems]="'ArchiveList1'"></singleselect>
      <div class="wrapper">
           <css-carousel></css-carousel>
      </div>

Please provide more information about what you try to accomplish. What have you tried where did you fail? Please add some code that demonstrates what you tried. — Günter Zöchbauer, Nov 06 '16 at 10:37
I want to use for example component two times in same html page. but I dont know how to access each instance separately. maybe some thing like id. for example I want to get selected item from first instance of component. — it8912153, Nov 06 '16 at 10:42
in images singleselect in the name of component that I have created to load dropdown lists according to call web api and I want to use it 2 times for example in one html page, but when I want to get selected item of this component I dont know how to access each one. — it8912153, Nov 06 '16 at 11:02
Please add the code as text to your question instead as screenshot. — Günter Zöchbauer, Nov 06 '16 at 11:04
how to access each singleselect component in host template html? — it8912153, Nov 06 '16 at 11:14
Perhaps http://stackoverflow.com/questions/32693061/angular-2-typescript-get-hold-of-an-element-in-the-template/35209681#35209681 is what you are looking for. You should try to avoid accessing elements in the DOM. I think you should add an output to singleselect like `@Output() calleditemsChange:EventEmitter() = new EventEmitter()` and then bind to it like ``` and then read the values from `someProperty` and `otherProperty`. — Günter Zöchbauer, Nov 06 '16 at 11:18

score 2 · Answer 1 · answered Jun 04 '17 at 11:41

I think you need ViewChild annotation. you can give to each of your dropdown component an id in your Html page like this:

<drop-down #countriesDropDown></drop-down>
<drop-down #citiesDropDown></drop-down>

then in your component.ts file :

export class HomeComponent implements OnInit {
    @ViewChild("countriesDropDown")
    contriesDp: dropdownComponent;

    @ViewChild("citiesDropDown")
    citiesDp: dropdownComponent;
}

now you can use your public methods of your DropDown component seprately like:

ngOnInit() {
    this.contriesDp.publicMethod();
    this.citiesDp.publicMethod();
}

Make difference between instances of same component in angular2

1 Answers1