How to use @ViewChildren in Angular2?

Question

In my home.html:

<p #pmessage>msg 1</p>
<p #pmessage>msg 2</p>
<p #pmessage>msg 3</p>
<p #pmessage>msg 4</p>

In my home.ts:

export class HomePage {
    @ViewChildren('pmessage') pMessages;

    constructor() {
         //using first works, result <p>msg 1</p>
         console.log(this.pMessages.first.nativeElement);
         //using last also works, result <p>msg 4</p>
         console.log(this.pMessages.last.nativeElement);
         //How can I get the two in the middle? i.e <p>msg 2</p> and <p>msg 3</p>
         //this isn't working
         console.log(this.pMessage[1].nativeElement); 
         //this either isn't working
         console.log(this.pMessage.1.nativeElement); 
    }
}

Please help. Thanks.

You can't access `this.pMessages` in the constructor. It is only set when `ngAfterViewInit()` was called. — Günter Zöchbauer, Jul 01 '16 at 12:27
try this: console.log(this.pMessage.toArray()[1].nativeElement); — Naik Ashwini, Apr 20 '17 at 03:23
try console.log(this.pMessages._results[1]._elementRef.nativeElement) that worked for me — spencer, Aug 14 '18 at 20:10

score 2 · Answer 1 · answered Jul 01 '16 at 12:26

2

There is typo in accessing pMessages. The 's' is missing.

`console.log(this.pMessages[1].nativeElement);`

Also you should access viewChildren in ngAfterViewInit or later. The variable could be undefined before that

answered Jul 01 '16 at 12:26

Arpit Agarwal

3,993
24
30

Your solution is not working. Please see my plunkr: http://plnkr.co/edit/yuYQz7Mt1KGfzpWV0GrK?p=preview – Vicheanak Jul 01 '16 at 15:13

How to use @ViewChildren in Angular2?

1 Answers1