Why i cant get the value from drop down in Angular10?

Question

create-to-to.component.html

<p>create-to-do works!</p>
<div class="container">
<form #todoForm="ngForm">
    <input type="text" name="task_name" palceholder="Task Name" [(ngModel)]="todo_service.selected_todo.name">
    <br><br>
    <label for="description">Task Description</label>
    <br>
    <textarea  name="description"  [(ngModel)]="todo_service.selected_todo.description">
    </textarea>    
   <!-- drop down -->
    <!-- Example single danger button -->
    <label>Repeating Task</label>
    <select id="myList">
      <option value="1">NA</option>  
      <option value="2">Yes</option>
      <option value="3">No</option>
    </select>

    <!-- drop down ends -->
    <!-- <input type="text" name="task_name" palceholder="Task Name" [(ngModel)]=""> -->
</form>
</div>

create-to-do.component.js

import { Component, OnInit } from '@angular/core';
import {NgForm} from '@angular/forms'
import {TodoService} from '../shared/todo.service';
import {Todo} from '../shared/todo';

@Component({
  selector: 'app-create-to-do',
  templateUrl: './create-to-do.component.html',
  styleUrls: ['./create-to-do.component.css'],
  providers:[TodoService]
})
export class CreateToDoComponent implements OnInit {

  constructor(public todo_service : TodoService) { }
  
  ngOnInit(): void {
    console.log(' in ngOnInit function ');
   
    this.todo_service.selected_todo={
      name : "",
      description : "",
      repeated_task:"",
    };

   console.log(this.todo_service.selected_todo)
    var drop_down = document.getElementById("myList").value;// why this line is not working
    console.log(drop_down);
   let timerId  = setInterval(()=>{
      //console.log(this.todo_service.selected_todo);
    
      if(this.todo_service.selected_todo.name!="" && this.todo_service.selected_todo.description!=""){
        //console.log(this.todo_service.selected_todo);
        console.log('done ');
        clearTimeout(timerId);
      }
    },100);
  }

}

I am fairly new to Angular and Web dev and had come across a problem where I have to fetch the value of drop-down, but using simple javascript whenever I am doing document.getElementById("myList").value it's throwing an error saying that it is Property 'value' does not exist on type 'HTMLElement' how should I overcome this?

Answer 1

since this is typescript you have to define it as like

let drop_down = (document.getElementById("myList") as HTMLInputElement).value;

But a good method is to bind the change event in the drop down like

  <select  (change)="valueChange($event)">
  <option value="1">NA</option>  
  <option value="2">Yes</option>
  <option value="3">No</option>
</select>

in your ts

valueChange(event){
  console.log("selected value",event.target.value)
let value = event.target.value;
}