Angular 17 shows Object is possibly 'null'

I am very new to Angular. I am trying to call a GET web API method upon a button click. Now I want to display the response in HTML. When I try to access the model object, it says:

Object is possibly 'null'.
​

Please help.

Here is my app.component.ts. Please see the GetPatientByDate function. The function is getting called and the res object has data.

import { HttpClient, HttpClientModule } from '@angular/common/http';
import { Component, inject } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { Observable } from 'rxjs';
import { PatientModel } from '../models/PatientModel.model';
import { AsyncPipe } from '@angular/common';
import { FormsModule } from '@angular/forms';

@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet, HttpClientModule, AsyncPipe, FormsModule],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})

export class AppComponent {
title = 'Patient Details';
http = inject(HttpClient);

patients$ = this.GetPatients();
//patient$ = this.GetPatientByDate();
inputValue: string = '';
patientDetail: PatientModel | null = null;

private GetPatients(): Observable<PatientModel[]> {
return this.http.get<PatientModel[]>('https://localhost:7076/api/Appointments');
}

showAlert(): void {
if (this.inputValue) {
this.http.get<PatientModel>('https://localhost:7076/api/Appointments/date?date='+this.inputValue).subscribe((res: PatientModel) => {
alert("Name:" + res.name + " && id:" + res.id + " && Appointment Date:" + res.appointmentDate);
});
} else {
alert("None");
}
}

GetPatientByDate(): void {
this.http.get<PatientModel>('https://localhost:7076/api/Appointments/date?date='+this.inputValue).subscribe((res: PatientModel) => {
this.patientDetail = res;
});
}
}


The model I have is as follows:

export interface PatientModel {
id: string;
name: string;
appointmentDate: string;
reason: string;
}


The app.component.html is as follows. Please see patientDetail.name.

<h1>{{title}}</h1>
<br/><br/>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
</style>
<table>
<tr>
<td><b>ID</b></td>
<td><b>Name</b></td>
<td><b>Appointment Date</b></td>
<td><b>Reason</b></td>
</tr>
@if (patients$ | async; as patients) {
@if (patients.length > 0) {
@for (item of patients; track $index) {
<tr>
<td><p>{{ item.id }}</p></td>
<td><p>{{ item.name }}</p></td>
<td><p>{{ item.appointmentDate }}</p></td>
<td><p>{{ item.reason }}</p></td>
</tr>
}
}
@else {
<p>Nothing found</p>
}
}
</table>

<br/>
<br/>

<div ng-controller="myController">
<label for="myInput">Enter Date:</label><br>
<input type="text" id="myInput" [(ngModel)]="inputValue" placeholder="Type here...">
<br><br>
<button (click)="GetPatientByDate()">Show Alert</button>

<p>Value bound to component property: {{ inputValue }}</p>
</div>
<br/>

<p>Details:{{ patientDetail.name }}</p>

Continue reading...