Selecting viewchild with 1 hash selection in angular 2

Question

Is there a trick to select multiple tag within same level with same tag?

<div #el></div>
<div #el></div>
<div #el></div>

It's always given "Reference "#el" is defined several times" error message.

Thanks in advance

You can't give same id to multiple element. It will select first element only. — Dhaval kansagara, Sep 15 '17 at 09:43
@Dhavalkansagara So is there another way to make it like that? [here](https://netbasal.com/understanding-viewchildren-contentchildren-and-querylist-in-angular-896b0c689f6e) is a link to make what i want, but this method is too complicated to sync with my current code.. — user5436320, Sep 15 '17 at 09:50
You can't , with your attempt with ViewChildren & QueryList, you will get a single item only with a template variable like you do, but it will give a list if you use these for component/directive — Fetrarij, Sep 15 '17 at 10:12
What's the purpose of using the same variable references? Could you use a wrapper and give it the unique variable reference as workaround? — Vega, Sep 15 '17 at 10:14
@Vega yeah I did what you told, just want to make more simple.. Thanks — user5436320, Sep 15 '17 at 10:21

score 5 · Answer 1 · answered Oct 09 '17 at 09:31

Below approach is working fine for me for multiple elements with appropriate selector.

I have an requirement to load the popup modal dynamically from code base and also perform some actions like Minimize, Maximize, Close and Resize. At that time I have to pick the any one opened modal to perform some operation and I came up with this solution.

Below is my HTML, In which I used #dynamicPopupContentPlaceHolder as selector for div tag.

Firstly, Need to add the QueryList in component from angular/core library as shown below.

Finally, In the component file I used the QueryList (Contains the array of children) to get all the children using below way.

At end I used the widgetSelector variable to get the last child from array using below way.

let _targetSelector = this.widgetTargets.last;

Can someone please edit this answer to include code rather than images? As someone who is blind, it's entirely unreadable as written. — Sam Hartman, Nov 26 '17 at 18:12
Please don't put images that contains code. Copy/paste the code instead. — Julien, Oct 07 '20 at 09:19

score 1 · Answer 2 · edited Oct 23 '18 at 07:31

1

Include ViewChildren.

import {Component, ViewChildren} from 'angular2/core'

Now you can use the following code.

@ViewChildren('el') components:QueryList<ElementRef>;

edited Oct 23 '18 at 07:31

devDan

5,969
3
21
40

answered Sep 15 '17 at 10:00

Dhaval kansagara

551
4
17

I tried that first but only select the first element – user5436320 Sep 15 '17 at 10:02
@ViewChild will select one but @ViewChildren('el') components:QueryList; this will select all. – Dhaval kansagara Sep 15 '17 at 10:05
@Dhavalkansagara @ViewChildren('el') components:QueryList is only a single element. `Note: In this case, it will make more sense to use the @ViewChild decorator because this is only a single element.` – Fetrarij Sep 15 '17 at 10:07
he need to select 3 div element with #el name. So we need to use @ViewChildren. – Dhaval kansagara Sep 15 '17 at 10:14
@Dhavalkansagara for a template variable it wont work, just got one element. But for component or directive that would work. – Fetrarij Sep 15 '17 at 10:15
Check this here https://gist.github.com/benfoley/7a73f18bc54a5dc2ac92393731b31b46 – Dhaval kansagara Sep 15 '17 at 10:17

score 0 · Answer 3 · answered Sep 15 '17 at 10:18

Oh nevermind.. I got another way, but not so neat

<div #el>
  <div el></div>
  <div el></div>
  <div el></div>
</div>

Then for select all use querySelectorAll

@ViewChild('el') element: ElementRef;
this.element.nativeElement.querySelectorAll('[el]')

Thanks All

Selecting viewchild with 1 hash selection in angular 2

3 Answers3