How to link a ticket to its related object using objectId in Angular when data comes from...

I’m building an Angular frontend for an ERP-like system, and I’m trying to generate a link like:

<a [routerLink]="['/erp/real-estates/objects', objectId]">Gå till objekt # som förvaltare

The goal is to show this link under each ticket, using the correct objectId associated with the caseId (which is the ticket ID).

Here’s what I’m doing in getTicket():

this.apiService.fetch(`tickets/${id}`, null).subscribe({
next: (result) => {
this.ticket = result[0].data;
const caseId = this.ticket?.head?.id ?? this.ticketId;

this.http.get(`/api/objects?caseId=${caseId}`).subscribe({
next: (res) => {
const raw = Array.isArray(res) ? res[0] : res;
const data = raw?.data;
const row = Array.isArray(data) ? data[0] : data;
this.objectId = row?.objectId ?? row?.id ?? null;
},
error: () => {
this.objectId = null;
}
});
}
});


But this.objectId is showing as undefined in the component, and the link is greyed out. Also, TypeScript complains:

Property 'objectId' does not exist on type 'TicketComponent'



I’ve tried:

Logging the response from /api/objects?caseId=... (it contains the objectId)

Making sure objectId is declared in the component

Ensuring the API returns the right data

What’s the best way to fix this so the link correctly renders when objectId exists?

❓What I’m asking: 1. Is this the correct way to extract objectId from a case? 2. How should I safely bind it to the link without Angular template errors? 3. Should I move this logic elsewhere or restructure the component?

Continue reading...