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 = "";
        }
    });
}

Solution

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,

1. Use Renderer and ElementRef to fetch current component elements
2. 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

Comments

[Omar]

Will try all of these and share how it goes tomorrow

[Naga Sai A]

@Omar any luck?

[Sh eldeeb]

why you imported Renderer?