After utilizing Knockout for the past 5 years, I have decided to dive into the latest version of Angular for a change. Therefore, I am relatively new to Angular.
Problem
Upon clicking, a server call is executed which performs certain actions and returns a response. Everything seems to be functioning correctly on the server side, with the object being bound properly according to my debugging efforts. However, the UI refuses to update despite my attempts to configure the change tracking.
Code
Written in Typescript/Angular Markup
import { Component, Inject, ChangeDetectorRef } from "@angular/core";
import { HttpClient } from "@angular/common/http";
// Models
import { ContactRequest } from "../../Models/Contact/ContactDetailsRequest";
import { ContactDetailsResponse } from "../../Models/Contact/ContactDetailsResponse";
// Payloads
import { ContactBreakdownPayload } from "../../Payload/Contact/ContactPostPayload";
@Component({
selector: "app-home",
templateUrl: "./contact.component.html"
})
export class ContactComponent {
private BaseUrl: string;
private HttpClientObject: HttpClient;
public ChangeDetection: ChangeDetectorRef;
public Contacts: Array<ContactDetailsResponse> = [];
constructor(httpClient: HttpClient, @Inject('BASE_URL') baseUrl: string, changeDetection: ChangeDetectorRef) {
this.BaseUrl = baseUrl;
this.HttpClientObject = httpClient;
this.ChangeDetection = changeDetection;
}
public RetrieveContactDetails(): void {
const payload = {
ContactBreakdowns: ContactBreakdownPayload
} as ContactRequest;
this.HttpClientObject.post(`${this.BaseUrl}contact`, payload)
.subscribe((response: Array<ContactDetailsResponse>) => {
console.log(response);
this.Contacts = response;
console.log(this.Contacts);
this.ChangeDetection.detectChanges();
});
}
}
HTML Markup
<button type="button"
class="btn btn-outline-primary btn-block"
(click)="RetrieveContactDetails()">
Retrieve contacts
</button>
<table class="table table-striped"
style="margin-top: 0.625rem">
<thead class="thead-dark">
<tr>
<th scope="col">Title</th>
<th scope="col">First name</th>
<th scope="col">Last name</th>
<th scope="col">Date of birth</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let Contact of ContactDetails">
<td>TEST</td>
<td>TEST</td>
<td>TEST</td>
<td>TEST</td>
<td>TEST</td>
</tr>
</tbody>
</table>
Question
From the provided information, does anyone spot where I might be making an error? It could simply be a basic implementation detail that I have overlooked.