Angular 19: TypeScript Error with Conditional Type Checking in Dynamic Table Component

I have a dynamic table component in Angular 19, which is built using a TableConfig object. This configuration creates the table's structure, including headers, columns, and rows. The rows property of TableConfig can contain an array of SupportTheme or Role objects.

My issue is that even if I check in my code that .roles exists, an error occurs when I attempt to access the roles property on a SupportTheme object. Although I have an if condition that ensures this code block is only executed when tconfig.type is 'SUPPORT_THEMES', the Angular compiler still throws the following error:

NG9: Property 'roles' does not exist on type 'SupportTheme | Role'.
Property 'roles' does not exist on type 'Role'. [plugin angular-compiler]


This error doesn't make sense to me because the if condition should prevent any Role object from being processed in this block of code. (Also tried obj.hasOwnProperty('roles') = same result)

<!-- Row Content -->
@for (obj of tconfig.rows; track obj.id) {
<tr class="border-b dark:border-gray-700 transition-colors duration-300">
@if (tconfig.type === 'SUPPORT_THEMES') {
<td class="px-3 py-3 text-sm text-gray-500">
{{ obj.icon }}
</td>
}

<th scope="row" class="px-4 py-3 font-medium text-gray-900 whitespace-nowrap dark:text-white
transition-colors duration-300 flex items-center">
<div class="w-3 h-3 rounded-full inline-block me-1.5"
[style.background-color]="obj.type === 'TEAMLIST' ? '#' + obj.color.toString(16).padStart(6, '0') : ''"></div>
{{ obj.name }}
</th>

@if (tconfig.type === 'TEAMLIST') {
@if (obj.support_level) {
<td class="px-4 py-3">{{ getSupportLevel(obj.support_level) }}</td>
}
} @else if (tconfig.type === 'SUPPORT_THEMES') { // I also tried 'obj.hasOwnProperty('roles')'
@for (role of obj.roles; track role.id) {
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-opacity-10
bg-blue-500 text-blue-700 dark:bg-opacity-20 dark:bg-blue-400 dark:text-blue-200
border border-blue-200 dark:!border-blue-600 shadow-sm hover:bg-opacity-20 hover:shadow
transition-all duration-200">
{{ role.name }}
</span>
}
}
</tr>
}


Relevant data types:

export interface TableConfig {
type: 'SUPPORT_THEMES' | 'TEAMLIST';
list_empty: string;
dataLoading: boolean;

columns: ColumnConfig[];
rows: SupportTheme[] | Role[];
action_btn: ButtonConfig[];
}

export interface SupportTheme {
id: string;
name: string;
icon: string;
roles: Role[];
}

export interface Role {
id: string;
name: string;
// .. other attributes .. no "roles" here ..

// properties added by us
support_level?: number;
}

Continue reading...