How do I access the "checked" property of a HTML checkbox element using TypeScript?

Question

I have the following HTML Code:

<input type="checkbox" id="check-one">

The following CSS code:

.check-one {
accent-color: #9d3039; }

And the following TypeScript code:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  arrayName = new Array(10000);
}

const checkInput = document.getElementById('check-one') as HTMLInputElement;

console.log(checkInput.checked);

Whenever I view the console, all I get is an error that reads: Uncaught TypeError: checkInput is null

I'm wondering why this is happening? Why is it not returning either True or False since checkInput.checked is a boolean? Additionally, how to I manipulate this property so that the box can be checked and unchecked using a line of code in Typescript?

Chris Hamilton · Accepted Answer · 2022-05-04 02:53:31Z

The element does not exist when you make your query because your code gets executed when importing that TS file. The template for this component has not yet been injected into the DOM.

You need to wait until after the view is initialized before querying the DOM. You can use the ngAfterViewInit hook for this:

export class AppComponent implements AfterViewInit {
  ngAfterViewInit() {
    const checkInput = document.getElementById('check-one') as HTMLInputElement;
    console.log(checkInput.checked);
  }
}

Docs for lifecycle hooks: https://angular.io/guide/lifecycle-hooks

In an angular project, you can use a template reference and the ViewChild decorator to select an HTML element:

<input type="checkbox" #checkOne />

export class AppComponent implements AfterViewInit {
  @ViewChild('checkOne') _checkOne?: ElementRef;
  get checkOne(): HTMLInputElement | undefined {
    return this._checkOne?.nativeElement;
  }

  ngAfterViewInit() {
    console.log(this.checkOne?.checked);
  }
}

This is safer since you know exactly which element is being selected and it's easier to make repetitive calls.

As for setting the value of checked it's pretty simple from there:

export class AppComponent implements AfterViewInit {
  @ViewChild('checkOne') _checkOne?: ElementRef;
  get checkOne(): HTMLInputElement | undefined {
    return this._checkOne?.nativeElement;
  }

  ngAfterViewInit() {
    if (this.checkOne) {
      console.log(this.checkOne.checked);
      this.checkOne.checked = true;
      console.log(this.checkOne.checked);
    }
  }
}

user18847228 · Accepted Answer · 2022-05-04 01:58:34Z

0

you can use onChange attribute to trigger a action when checked

    <input type="checkbox" name="checkbox" value="<%=item._id%>" onChange="this.form.submit()">

and later you can use the name attribute to target the value attribute

answered May 4, 2022 at 1:58

user18847228

Comments

Heisenberg · Accepted Answer · 2022-05-04 03:49:37Z

0

I realy suggest to use:

<input type="checkbox" [(ngModel)]="check_box_value" />

to bind the property check_box_value to manipulate state on dom.

answered May 4, 2022 at 3:49

Heisenberg

11 bronze badge

Comments

Koi An · Accepted Answer · 2022-05-04 02:04:49Z

-1

when you call them,at time it doesn't render to html element,call it on ngOnit enter image description here

answered May 4, 2022 at 2:04

Koi An

701 silver badge2 bronze badges

2 Comments

Arokia Lijas Over a year ago

It should be ngAfterViewInit since this hook will be called after the DOM is rendered

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

How do I access the "checked" property of a HTML checkbox element using TypeScript?

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related