fix(controls): Fix control order when using custom controls alongside…

… built-in controls (fix #75)

projects/ngx-mapbox-gl/src/lib/control/attribution-control.directive.ts

@@ -1,12 +1,12 @@
-import { Directive, Host, Input, OnInit } from '@angular/core';
+import { AfterContentInit, Directive, Host, Input } from '@angular/core';
 import { AttributionControl } from 'mapbox-gl';
 import { MapService } from '../map/map.service';
 import { ControlComponent } from './control.component';
 
 @Directive({
   selector: '[mglAttribution]'
 })
-export class AttributionControlDirective implements OnInit {
+export class AttributionControlDirective implements AfterContentInit {
   /* Init inputs */
   @Input() compact?: boolean;
   @Input() customAttribution?: string | string[];
@@ -16,7 +16,7 @@ export class AttributionControlDirective implements OnInit {
     @Host() private ControlComponent: ControlComponent
   ) { }
 
-  ngOnInit() {
+  ngAfterContentInit() {
     this.MapService.mapCreated$.subscribe(() => {
       if (this.ControlComponent.control) {
         throw new Error('Another control is already set for this control');

projects/ngx-mapbox-gl/src/lib/control/fullscreen-control.directive.ts

@@ -1,12 +1,12 @@
-import { Directive, OnInit, Host, Input } from '@angular/core';
+import { AfterContentInit, Directive, Host, Input } from '@angular/core';
 import { FullscreenControl } from 'mapbox-gl';
 import { MapService } from '../map/map.service';
 import { ControlComponent } from './control.component';
 
 @Directive({
   selector: '[mglFullscreen]'
 })
-export class FullscreenControlDirective implements OnInit {
+export class FullscreenControlDirective implements AfterContentInit {
   /* Init inputs */
   @Input() container?: HTMLElement;
 
@@ -15,7 +15,7 @@ export class FullscreenControlDirective implements OnInit {
     @Host() private ControlComponent: ControlComponent
   ) { }
 
-  ngOnInit() {
+  ngAfterContentInit() {
     this.MapService.mapCreated$.subscribe(() => {
       if (this.ControlComponent.control) {
         throw new Error('Another control is already set for this control');

projects/ngx-mapbox-gl/src/lib/control/geocoder-control.directive.ts

@@ -1,4 +1,5 @@
 import {
+  AfterContentInit,
   Directive,
   EventEmitter,
   Host,
@@ -7,7 +8,6 @@ import {
   Input,
   NgZone,
   OnChanges,
-  OnInit,
   Optional,
   Output,
   SimpleChanges
@@ -45,7 +45,7 @@ export interface Result extends GeoJSON.Feature<GeoJSON.Point> {
 @Directive({
   selector: '[mglGeocoder]'
 })
-export class GeocoderControlDirective implements OnInit, OnChanges, GeocoderEvent {
+export class GeocoderControlDirective implements AfterContentInit, OnChanges, GeocoderEvent {
   /* Init inputs */
   @Input() country?: string;
   @Input() placeholder?: string;
@@ -81,7 +81,7 @@ export class GeocoderControlDirective implements OnInit, OnChanges, GeocoderEven
     @Optional() @Inject(MAPBOX_GEOCODER_API_KEY) private readonly MAPBOX_GEOCODER_API_KEY: string
   ) { }
 
-  ngOnInit() {
+  ngAfterContentInit() {
     this.MapService.mapCreated$.subscribe(() => {
       if (this.ControlComponent.control) {
         throw new Error('Another control is already set for this control');

projects/ngx-mapbox-gl/src/lib/control/geolocate-control.directive.ts

@@ -1,12 +1,12 @@
-import { Directive, Host, Input, OnInit } from '@angular/core';
+import { AfterContentInit, Directive, Host, Input } from '@angular/core';
 import { GeolocateControl, FitBoundsOptions } from 'mapbox-gl';
 import { MapService } from '../map/map.service';
 import { ControlComponent } from './control.component';
 
 @Directive({
   selector: '[mglGeolocate]'
 })
-export class GeolocateControlDirective implements OnInit {
+export class GeolocateControlDirective implements AfterContentInit {
   /* Init inputs */
   @Input() positionOptions?: PositionOptions;
   @Input() fitBoundsOptions?: FitBoundsOptions;
@@ -18,7 +18,7 @@ export class GeolocateControlDirective implements OnInit {
     @Host() private ControlComponent: ControlComponent
   ) { }
 
-  ngOnInit() {
+  ngAfterContentInit() {
     this.MapService.mapCreated$.subscribe(() => {
       if (this.ControlComponent.control) {
         throw new Error('Another control is already set for this control');

projects/ngx-mapbox-gl/src/lib/control/navigation-control.directive.ts

@@ -1,12 +1,12 @@
-import { Directive, Host, Input, OnInit } from '@angular/core';
+import { AfterContentInit, Directive, Host, Input } from '@angular/core';
 import { NavigationControl } from 'mapbox-gl';
 import { MapService } from '../map/map.service';
 import { ControlComponent } from './control.component';
 
 @Directive({
   selector: '[mglNavigation]'
 })
-export class NavigationControlDirective implements OnInit {
+export class NavigationControlDirective implements AfterContentInit {
   /* Init inputs */
   @Input() showCompass?: boolean;
   @Input() showZoom?: boolean;
@@ -16,7 +16,7 @@ export class NavigationControlDirective implements OnInit {
     @Host() private ControlComponent: ControlComponent
   ) { }
 
-  ngOnInit() {
+  ngAfterContentInit() {
     this.MapService.mapCreated$.subscribe(() => {
       if (this.ControlComponent.control) {
         throw new Error('Another control is already set for this control');

projects/ngx-mapbox-gl/src/lib/control/scale-control.directive.ts

@@ -1,12 +1,12 @@
-import { Directive, Host, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { AfterContentInit, Directive, Host, Input, OnChanges, SimpleChanges } from '@angular/core';
 import { ScaleControl } from 'mapbox-gl';
 import { MapService } from '../map/map.service';
 import { ControlComponent } from './control.component';
 
 @Directive({
   selector: '[mglScale]'
 })
-export class ScaleControlDirective implements OnInit, OnChanges {
+export class ScaleControlDirective implements AfterContentInit, OnChanges {
   /* Init inputs */
   @Input() maxWidth?: number;
 
@@ -24,7 +24,7 @@ export class ScaleControlDirective implements OnInit, OnChanges {
     }
   }
 
-  ngOnInit() {
+  ngAfterContentInit() {
     this.MapService.mapCreated$.subscribe(() => {
       if (this.ControlComponent.control) {
         throw new Error('Another control is already set for this control');

projects/showcase/src/app/demo/examples/ngx-custom-control.component.ts

@@ -16,6 +16,13 @@ import { Component } from '@angular/core';
         Hello
       </button>
     </mgl-control>
+
+    <mgl-control mglAttribution position="top-right"></mgl-control>
+    <mgl-control mglFullscreen position="top-right"></mgl-control>
+    <mgl-control mglGeocoder position="top-right"></mgl-control>
+    <mgl-control mglGeolocate position="top-right"></mgl-control>
+    <mgl-control mglNavigation position="top-right"></mgl-control>
+    <mgl-control mglScale position="top-right"></mgl-control>
   </mgl-map>
   `,
   styleUrls: ['./examples.css']