Property 'checked' does not exist on type 'HTMLElement' angular 4

Question

i am trying to get checkbox checked value from ts(type script) file. For this, I have a Boolean variable and the purpose is to show and hide div using this variable value but I am facing a problem. Please help me to solve this and also give me the right way to do this. Here is my code...

html code

**checkbox code**abcde" class="form-check-input" id="abcde" value="1"
(change)="checked('abcde')"> abcde

show and hide code

*ngIf='shown'

ts file

checked(value) {

    let get_id = document.getElementById('abcde');

    if (get_id.checked == true) {
        this.shown = true
    }
    else if (get_id.checked == false)
        this.shown = false;
}

When i run ng serve then I get "Property 'checked' does not exist on type 'HTMLElement'"

Thanks in advance!

Answer 1

Use this:

const ele = document.getElementById("idOfElement") as HTMLInputElement;
ele.checked = false;

Answer 2

In your HTML

<input #abcde  type="checkbox" (change)="func()" />

In your component

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

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

export class AppComponent {
  @ViewChild('abcde') abcde: ElementRef;
  func() {
    this.abcde.nativeElement.checked
  }
}

Answer 3

//Typescript File (app.component.ts)         
    import { Component } from 'angular/core';
                @Component({
                  selector: 'app-root',
                  template: './app.component.html',
                  styleUrls: ['./app.component.css']
                })
                export class AppComponent {
                   public shown = false;
                } 

    //Html Code (app.component.html)
        <form #myForm='ngForm'>      
                <input type="checkbox" class="form-control" 
                     #checkBox="ngModel" 
                  [(ngModel)]="shown" name="checkBox">
        </form>
                <div *ngIf="shown"> 
                    <!---Your Code Here...--->
                </div>

Here, This is one of the way to do show and hide div element on basis of checkbox selection and deselection. Two way binding is done here with shown variable.