mgl-control order problem

[HarelM]

If have the following code:

   <mgl-control position="top-left">1</mgl-control>
   <mgl-control position="top-left" *ngIf="true">2</mgl-control>
   <mgl-control position="top-left">3</mgl-control>

Which creates an incorrect ordered of controls:

Removing the *ngIf sort this out, but this is a silly example, as I need this *ngIf in real life.
Also I've tried to place a control under the scale in case the scale control is in the right bottom and couldn't...
This is probably due to the same reason, i.e:
The following two snippets produce the same controls layout:

<mgl-control position="bottom-right">2</mgl-control>
<mgl-control mglScale position="bottom-right"></mgl-control>

and:

<mgl-control mglScale position="bottom-right"></mgl-control>
<mgl-control position="bottom-right">2</mgl-control>

Let me know if there's something I can do to help out.

[sroettering]

I have this issue, too. See #75

[HarelM]

@sroettering yup, this issue can be closed as a duplicate. Can you elaborate on the workaround you did as I have no workaround right now beside not using mgl-control and using regular css to solve this.

[sroettering]

I had two options in mind as a workaround:

1. Use flexbox ordering to order the controls on the map
2. Use the onLoad event and add the controls "by hand" with: map.addControl(new FullscreenControl())

Option 1 is good if you are ok with changing the mapbox styling.
With option 2, you would have to add all controls in the same corner like this.

[BAByrne]

Another workaround is to add *ngIf="true" to the other controls.

[HarelM]

I've ended up using an id element and ViewChildern like so:
HTML:
<zoom #topLeftControl></zoom>
TS:

...
@ViewChildren("topLeftControl", { read: ElementRef })
 public topLeftControls: QueryList<ElementRef>;
...
public onLoad() {
    this.topLeftControls.forEach(c => {
            this.mapComponent.mapInstance.addControl(new CustomControl(c.nativeElement), "top-left");
        });
}

And so I have full control on the order, option @sroettering 's option 2 basically.

[BAByrne]

Not certain this should have been closed, as the only solutions proposed have been workarounds.

[dmytro-gokun]

@BAByrne I do not think there is a way to solve this 'properly' (because Angular does not give any ordering guaranetees). At least not one I could be able to come up with. If you have any idea have this might be solved - let me know (plz open a separate issue) or submit a PR.