Angular 2 template reference variable with *ngFor

Question

I have two components: list and detail

In list component I want to render multiple detail components.

list.component.ts

@Component({
    selector: 'detail',
    templateUrl: './detail.component.html'
})
export class DetailComponent {
    @ViewChild('details') details;

    public items = {
        // ...
    }
}

list.component.html

<detail *ngFor="let item of items" #details></detail>

Notice the #details tempalte reference variable. I want to access all of the detail components. It is possible to make the #details variable an array ?

score 7 · Answer 1 · edited May 23 '17 at 12:09

7

@ViewChildren('details') details:QueryList<DetailComponent>;

ngAfterViewInit() {
  console.log(this.details.toArray());
  this.details.changes.subscribe(changes => {
    console.log(this.details.toArray());
  });
}

See also angular 2 / typescript : get hold of an element in the template

edited May 23 '17 at 12:09

Community

1
1

answered Nov 26 '16 at 15:12

Günter Zöchbauer

623,577
216
2,003
1,567

Basically if it is nested with ng-content we can switch to @ContentChildren correct? – Winnemucca Aug 23 '18 at 19:58
@Winnemucca yes – Günter Zöchbauer Aug 23 '18 at 20:01

Angular 2 template reference variable with *ngFor

1 Answers1

Linked