Angular Template Reference Object with multiple types

Issue

I have an object bound to the template. This object has two types.

const config: IDialogConfig | IDialogConfig[];

My template looks something like this.

<ng-container *ngIf="isArray(config); else singleMessage">
    <ng-container *ngFor="let message of config">
        <p [fieldId]="message.fieldKey" class="display-4 confirm-msg"></p>
    </ng-container>
</ng-container>
<ng-template #singleMessage>
    <p [fieldKey]="config.fieldKey" class="display-4 confirm-msg"></p>
</ng-template>

Now, with this kind of setup, I am getting an error inside the #singleMessage template

Property 'fieldID' does not exist on type 'IDialogMessage[]'

Is there anyway I can make this setup works? As much as possible I do not want to use an any type.

Solution

You can keep the config type as is it, but within the template, you can use $any() method to handle this error:

<ng-container *ngIf="isArray(config); else singleMessage">
    <ng-container *ngFor="let message of config">
        <p [fieldId]="message.fieldKey" class="display-4 confirm-msg"></p>
    </ng-container>
</ng-container>
<ng-template #singleMessage>
    <p [fieldKey]="$any(config).fieldKey" class="display-4 confirm-msg"></p>
</ng-template>

Answered By - Amer