Angular 13 - Data is accessible inside component, but does not show on the html page - node.js

Question

So, I am learning Angular right now, and tried doing a CRUD Application. Almost everything works, except when trying to get data using ID, I can access all the data in the component.ts file, but the same is not rendered into html file. Here is what I have tried :-
edit-to.component.ts
export class EditTodoComponent implements OnInit {
private tid: number = 0;
public Todo:TodoModel= null ;
public desc:string='';
public title:string='';
public id:number;
constructor(private route: ActivatedRoute, private http:HttpClient) { }
ngOnInit(): void {
this.route.paramMap.subscribe(all_params =>{
this.tid = parseInt(all_params.get('id'))
//console.log( all_params.get('id'))
//console.log( this.tid );
});
this.getTodoFromId(this.tid)
}
getTodoFromId(id){
//console.log("id="+id)
this.http.get<{data: any}>('http://localhost:3000/api/todos/get_todo_from_id/'+id).subscribe((data) =>{
console.log("response in angular= \n");
this.Todo = data[0]
console.log(this.Todo.todo_title) //-> This one works
}
editOnSubmit(form:NgForm){
//something here
}
edit-todo.component.html
<div class="col-md-12">
<form (ngSubmit)="editOnSubmit(todoForm)" #todoForm="ngForm">
<input type="text" class="form-control" id="todo_id" [(ngModel)]="id" name="todo_id" value="1">
<div class="mb-3">
<label for="todo_title" class="form-label">Title</label>
<input type="text" class="form-control" id="todo_title" [(ngModel)]="title" name="title" value="{{ Todo.todo_title}}"> //-> This one does not work.
</div>
<div class="mb-3">
<label for="label" class="form-label">Description</label>
<textarea class="form-control" id="todo_description" [(ngModel)]="desc" name="desc" ></textarea>
</div>
<button type="submit" class="btn btn-success">Edit To Do</button>
</form>
</div>
</div>
Separating out,
from edit-to.component.ts :-
console.log(this.Todo.todo_title) works
but from edit-todo.component.html
<input type="text" class="form-control" id="todo_title" [(ngModel)]="title" name="title" value="{{ Todo.todo_title}}"> does not work

Answer 1

it's because you have a ngModel and a value configured on same input field
in this situation the ngModel have priority on value attribute
to fix it you can initialize title in ngOnInit
this.title = this.Todo.todo_title;
in your case you wait reply from http request so the initialization after hte http reply :
getTodoFromId(id){
this.http.get<{data: any}>('http://localhost:3000/api/todos/get_todo_from_id/'+id).subscribe((data) =>{
console.log("response in angular= \n");
this.Todo = data[0]
this.title = this.Todo.todo_title;
console.log(this.Todo.todo_title);
}

Answer 2

Define a property of type BehaviorSubject.
isAvailableData = new BehaviorSubject<boolean>(true);
Then where you subscribe the data set it to true.
getTodoFromId(id){
//console.log("id="+id)
this.http.get<{data: any}>('http://localhost:3000/api/todos/get_todo_from_id/'+id).subscribe((data) =>{
console.log("response in angular= \n");
this.Todo = data[0];
this.isAvailableData.next(true);
console.log(this.Todo.todo_title) //-> This one works
}
after that in your HTML add ngIf to col-md-12 div:
<div class="col-md-12" *ngIf="(isAvailableData | async)">
<form (ngSubmit)="editOnSubmit(todoForm)" #todoForm="ngForm">
<input type="text" class="form-control" id="todo_id" [(ngModel)]="id" name="todo_id" value="1">
<div class="mb-3">
<label for="todo_title" class="form-label">Title</label>
<input type="text" class="form-control" id="todo_title" [(ngModel)]="title" name="title" value="{{ Todo.todo_title}}"> //-> This one does not work.
</div>
<div class="mb-3">
<label for="label" class="form-label">Description</label>
<textarea class="form-control" id="todo_description" [(ngModel)]="desc" name="desc" ></textarea>
</div>
<button type="submit" class="btn btn-success">Edit To Do</button>
</form>
Also you made a mistake in your form the input should be like below:
And there is no need to define a property for id, title, ...
These are the properties of todo object
<label for="todo_title" class="form-label">Title</label>
<input type="text" class="form-control" id="todo_title" [(ngModel)]="Todo.todo_title" name="todo_title" #todo_title="ngModel">