Angular 2 + how to select and loop over multiple elements with the same selector (elementRef.nativeElement)

Question

In my component I am trying to unselect all checkboxes with the same class name.

querySelector selects only the first one each time (or once)... and querySelectorAll does not select anything.

this is the function. I know its wrong to use jQuery like that but it illustrates my goal.

unsetAllOptions(){
    var self = this;
    var i = 0;
    $("input.option_input").each(function(){
        i++;
        var element = self.elRef.nativeElement.querySelector("input.option_input")[i];
        if(element.checked){
            // console.log(i)
            console.log('unchecking:',i);
            element.checked=false;
            element.dispatchEvent(new Event('change'));
            element = "";
        }
    });
}

Check this solution https://stackoverflow.com/a/45608352/1713468 — Karthick Manoharan, Apr 17 '18 at 20:08
i see that works but i cant understand all the `unit` mentions. Im hoping to find some kind of query selector and not do formBuilder — Omar, Apr 17 '18 at 20:38

score 11 · Accepted Answer · edited Jun 16 '20 at 02:15

To achieve expected result, use below option

Option 1:

As you are using .each method, using index and value you can avoid querySelectorAll, reference - http://api.jquery.com/jquery.each/

$("input.option_input").each(function(index,element){
        if(element.checked){
            element.checked=false;
            element.dispatchEvent(new Event('change'));
            element = "";
        }
    });

code sample - https://codepen.io/nagasai/pen/aGoMKz?editors=1010

Option 2

Option2 and preferred way is to avoid document.querySelectorAll ,as it fetches all matching elements of the DOM irrespective of the current component

Steps to achieved expected result,

Use Renderer and ElementRef to fetch current component elements
Use this.elem.nativeElement.querySelectorAll for fetching matching elements

component.ts

import { Component, Renderer, ElementRef } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 5';
  constructor(private renderer: Renderer, private elem: ElementRef){}

  unsetAllOptions(){
    const elements = this.elem.nativeElement.querySelectorAll('.option_input');
    elements.forEach(element => {
     if(element.checked){
        element.checked = false
     }
});
 }
}

component.html

<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>

<input type="checkbox" class="option_input" checked>
<input type="checkbox" class="option_input" checked>
<input type="checkbox" class="option_input" checked>
<input type="checkbox" class="option_input" checked>
<input type="checkbox" class="option_input">

<button (click)="unsetAllOptions()">UncheckAll</button>

code sample - https://stackblitz.com/edit/angular-aei58i?file=app/app.component.html

Will try all of these and share how it goes tomorrow – Omar Apr 18 '18 at 04:09 — Omar, Apr 18 '18 at 04:09
why you imported Renderer? – Sh eldeeb Jan 14 '20 at 12:40 — Sh eldeeb, Jan 14 '20 at 12:40

score 0 · Answer 2 · answered Apr 17 '18 at 20:54

this worked for me but if you know a better way. Let me know

unsetAllOptions(){
    var self = this;
    var i = -1;
    $("input.option_input").each(function(){
        i++;
        var element = self.elRef.nativeElement.querySelectorAll("input.option_input")[i];
        element.checked=false;
    });
}

Angular 2 + how to select and loop over multiple elements with the same selector (elementRef.nativeElement)

2 Answers2

Linked