How to get monthname from number using angular datepipe

Question

I want to display a dropdown containing (localized) month names by using angular's datepipe.

<select>
    <option *ngFor="let month of months;" value="{{month}}">
         {{month | date: 'MMMM'}}
    </option>
</select>

months is an array of numbers from 0 to 11.

The generated options have the correct values but it's always 'January'

<select>
     <option value="0"></option>
     <option value="1"> January</option>
     <option value="2"> January</option>
     <option value="3"> January</option>
     <option value="4"> January</option>
     <option value="5"> January</option>
     <option value="6"> January</option>
     <option value="7"> January</option>
     <option value="8"> January</option>
     <option value="9"> January</option>
     <option value="10"> January</option>
     <option value="11"> January</option>
</select>

Is there something wrong with my code or isn't it possible at all to achieve what i want using angular's datepipe? If so, how can i accomplish it?

Answer 1

months must be an array of Dates, you can use

months=[0,1,2,3,4,5,6,7,8,9,10,11].map(x=>new Date(2000,x,2))

And (see that I changed the [value] to [value]="i")

<select>
    <option *ngFor="let month of months;let i=index" [value]="i">
         {{month | date: 'MMMM'}}
    </option>
</select>