Iterate over a union

Question

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?

Answer 1

Thanks to Matthieu Riegler's answer, it works. I had a little pain to put working in component so here is a whole sample:

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

@Component({
    selector: 'app-input-date',
    templateUrl: './input-date.component.html',
    styleUrls: ['./input-date.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class InputDateComponent implements OnInit,  Validator, ControlValueAccessor {
    
    period: Period;
    periods = Periods;
...

and in HTML:

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