Iterate over a union

I have such enum/range:

period: 'UTD' | 'EOM' | 'ETM'

I want to iterate through all options in select:

<select
        class="custom-select"
        [value]="period"
        (change)="period=$event.target.value"
    >
        <ng-container *ngFor="let e of period">
            <option [value]="e" [selected]="e === period">
                {{ e }}
            </option>
        </ng-container>
    </select>

I need to get HTML with option per available enum in period range:

UTD
EOM
ETM

How is that possible please?

>Solution :

Unions & string literals have no existence at runtime, therefor you can’t iterate over them.

What you can do is : define your union like that

const Periods =  [ 'UTD' ,'EOM',  'ETM'] as const;
type Period = typeof Periods[number];

And you will be able to iterate over Periods