Angular 20: Data from Service Not Rendering in Template Unless cdr.detectChanges() is Called

I’m new to Angular and using Angular 20. I’m trying to load employee data from a service inside ngOnInit(). The data is received correctly, but it doesn’t show in the template unless I manually call ChangeDetectorRef.detectChanges() after assigning the data.

Here’s a simplified version of my code:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { IResponseModel } from '../../model/response.model';
import { UserModel } from '../../model/user.model';
@Injectable({
providedIn: 'root'
})
export class EmployeeService {

constructor(private http: HttpClient) { }

onLogin(obj: UserModel): Observable<IResponseModel> {
return this.http.post<IResponseModel>('https://freeapi.miniprojectideas.com/api/EmployeeLeave/Login', obj)
}

getAllEmployees(): Observable<IResponseModel> {
return this.http.get<IResponseModel>('https://freeapi.miniprojectideas.com/api/EmployeeLeave/GetEmployees')
}
}


import { Component, inject, OnInit } from '@angular/core';
import { EmployeeService } from '../../service/employeeService/employee';
import { IResponseModel } from '../../model/response.model';
import { IEmployeeList } from '../../model/employee.model';
import { CommonModule } from '@angular/common';

@Component({
selector: 'app-employee',
imports: [CommonModule],
templateUrl: './employee.html',
styleUrl: './employee.css'
})
export class Employee implements OnInit {
employeeSerivce = inject(EmployeeService);
empList: IEmployeeList[] = [];

ngOnInit(): void {
this.getEmployees();
}

getEmployees() {
this.employeeSerivce.getAllEmployees().subscribe({
next: (res: IResponseModel) => {
this.empList = res.data;
},
error: (err) => {
alert('Failed to load employees: ' + err.message);
}
});
}
}


export interface IResponseModel {
message: string
result: boolean
data: any
}

Continue reading...