CODEWITHSUNDEEP
angulartypescript
Vultimitavin
Vultimitavin

Reputation: 55

Angular ngswitch delivers unexpected result

this is my very first question at stackoverflow. Usually I get by pretty good by just reading other questions.

I am getting to know Angular at the moment, and I wonder why the ngSwitch directive is giving me results I wouldnt expect.

I created a component for my angular app that returns a ngx-bootstrap dropdown which I plan to use in different views. I dont know if this makes any architectural sense, but thats not the point here. If you have time, I certainly appreciate a comment to the architectural approach.

Now I hand over a Map<string, string> to my Dropdown component where key is what I want to show as an item in the Dropdown and value is the url I want to navigate to. This actually works nicely.

The ngx-bootstrap DropDown lets you put a divider in your Dropdown to seperate certain Dropdown items. To specify where a divider should appear, I thought I could simply hand over a key-value just like ['dropDownDivider', ''] and use ngSwitch to get the divider into my Dropdown HTML-Markup.

This actually works, the only thing is, the divider is always the last item in the Dropdown, no matter in which order I hand over the Map Collection.

This is what I hand over to my Dropdown component:

listitems = new Map([
  ['Alle', '#'],
  ['Detailseite', '#'],
  ['dropDownDivider', ''],
  ['Entfernen', '#'],
  ['Einstellungen', '#']
])

My @Input decorator @Input() listItems: Map<string, string>;

This is the list part of the Dropdown component view (I use angulars keyvalue pipe):

<!-- DropDown List -->
<ng-container *ngFor="let listItem of listItems | keyvalue">
    <ng-container [ngSwitch]="listItem.key">
        <li *ngSwitchCase="'dropDownDivider'" class="divider dropdown-divider"></li>
        <li *ngSwitchDefault>
            <a class="dropdown-item" href="{{listItem.value}}">{{listItem.key}}</a>
        </li>
     </ng-container>
 </ng-container>

I would expect that there is a divider in my dropdown list between 'Detailseite' and 'Entfernen'. The divider is always in the last Position, no matter in which position I put it in the Map collection.

Can someone explain this behaviour to me? If I log my Map to the console, its values are still in the order I put them initially.

Upvotes: 0

Views: 144

Answers (1)

JB Nizet
JB Nizet

Reputation: 691785

The KeyValue pipe orders the entries by key.

If you want to pass an ordered list of items, don't use a Map and the KeyValue pipe. Just pass an array of items.

Upvotes: 1

Related Questions