Angular 2 use method of dynamic ViewChildren component

Question

I have many instances of child component that creates via *ngFor. I want to use some method of selected one (I select one from parent). How I can do this?

Because ViewChild is not works (I have many components). Also ViewChildren also not working. Because I created it dynamically after some delay and ViewChildren have 0 length.

Thanks for any information.

just for example. _schedCompntnsArr have 0 length (but on page I have 4 componnets).

 directives: [
    SchedulerComponent
  ],

@ViewChildren(SchedulerComponent) schedCompntsList: QueryList<SchedulerComponent>;

ngAfterViewInit() {
  this._schedCompntnsArr = this.schedCompntsList.toArray();
}

knikolov · Accepted Answer · 2016-07-08 14:55:29Z

1

Tested the following code with R.C 4 and it worked as expected:

@Component({
 selector: 'my-app',
 template: `
   <FooComponent *ngFor="let item of items let i=index" [selected]="i == selected">
        {{item.city}} - {{item.temp}}
   </FooComponent>
`,
directives: [FooComponent]
})
class AppComponent {
  public selected: number = 1;

  public items: any = [{
        disabled: true,
        city: "Paris",
        temp: 17
  }, {
        disabled: false,
        city: "New York",
        temp: 29
  }, {
        disabled: false,
        city: "Helsinki",
        temp: 23
  }]

  foo: any;

  @ViewChildren(FooComponent) children:QueryList<FooComponent>;

  ngAfterViewInit() {
        this.foo = this.children.toArray();
        console.log(this.foo.length); //logs 3
  }

answered Jul 8, 2016 at 14:55

knikolov

1,8001 gold badge12 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Velidan Over a year ago

Did you try to fill items by data after some delay ? 5 sec for example.

knikolov Over a year ago

async operations are different story. See this sample: plnkr.co/edit/…

Collectives™ on Stack Overflow

Angular 2 use method of dynamic ViewChildren component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related