ActionItems are displayed in the wrong order using *ngIf

[m-abs]

If you have an ActionBar with optional ActionItems, the items switches place when the *ngIf state changes.

You can see what I mean in this gif:

There are two ActionItem, one with the title=1 and one with the title=2.

1. tap hides ActionItem 1.
2. tap shows ActionItem 1 again, but now on the right side of ActionItem 2
3. tap hides ActionItem 2
4. tap shows ActionItem 2 again, now in the proper order
5. tap hides both
6. tap shows both in the proper order.

I would expect the items to be shown in the order they're in the template:

<ActionBar>
  <ActionItem text="1" *ngIf="show1"></ActionItem>
  <ActionItem text="2" *ngIf="show2"></ActionItem>
</ActionBar>

I have a demo project here:
https://github.com/m-abs/tns-webpack-ng2.3/tree/action-ngIf-order

[tsonevn]

Hi @m-abs,
Thank you for reporting this issue,
I tested sample project and was able to reproduce this behavior.
As a temporary solution, you could use visibility property to hide the component, which will keep the elements in the same order. For example:

<ActionBar>
  <ActionItem text="1"  [visibility]="show1 ? 'visible' : 'collapsed'"></ActionItem>
  <ActionItem text="2"  [visibility]="show2 ? 'visible' : 'collapsed'"></ActionItem>
</ActionBar>