import { Component, OnInit, AfterViewInit, Input, Output, EventEmitter, ElementRef } from '@angular/core';
import { Store } from '@ngrx/store';
import { LeafletTileProviderService } from '../leaflet-tile-provider.service';

@Component({
  selector: 'app-leaflet-tile-selector',
  templateUrl: './leaflet-tile-selector.component.html',
  styleUrls: ['./leaflet-tile-selector.component.sass']
})
export class LeafletTileSelectorComponent implements OnInit, AfterViewInit {
  @Input() map:any;
  @Output() tileChange: EventEmitter<string> = new EventEmitter<string>();

  public tileKeys: any;

  constructor(
    public store: Store<any>,
    private element: ElementRef,
    private tileProvider: LeafletTileProviderService
  ) {}

  ngOnInit() {
    this.tileKeys = Object.keys(this.tileProvider.baseMaps);
  }

  ngAfterViewInit() {
    let selectEl = this.element.nativeElement.querySelector('#map-tile-selector');

    // TODO: unsuscribe once it fired once already
    this.store
      .select('map')
      .subscribe((state: any) => {
        if (state.tileProvider !== null && selectEl !== null && selectEl.value !== state.tileProvider) {
          console.log('trigger');

          selectEl.value = state.tileProvider;
        }
      })
      ;
  }

  onTileChange(event) {
    this.tileChange.emit(event.target.value);
  }

}



import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { LeafletTileProviderService } from '../leaflet-tile-provider.service';

@Component({
  selector: 'app-leaflet-tile-selector',
  templateUrl: './leaflet-tile-selector.component.html',
  styleUrls: ['./leaflet-tile-selector.component.sass']
})
export class LeafletTileSelectorComponent implements OnInit {
  @Input() map:any;
  @Output() tileChange: EventEmitter<string> = new EventEmitter<string>();

  public tileKeys: any;

  constructor(private tileProvider: LeafletTileProviderService) {}

  ngOnInit() {
    this.tileKeys = Object.keys(this.tileProvider.baseMaps);
  }

  onTileChange(event) {
    this.tileChange.emit(event.target.value);
  }

}



--- 
+++ 
@@ -1,4 +1,5 @@
-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { Component, OnInit, AfterViewInit, Input, Output, EventEmitter, ElementRef } from '@angular/core';
+import { Store } from '@ngrx/store';
 import { LeafletTileProviderService } from '../leaflet-tile-provider.service';
 
 @Component({
@@ -6,16 +7,36 @@
   templateUrl: './leaflet-tile-selector.component.html',
   styleUrls: ['./leaflet-tile-selector.component.sass']
 })
-export class LeafletTileSelectorComponent implements OnInit {
+export class LeafletTileSelectorComponent implements OnInit, AfterViewInit {
   @Input() map:any;
   @Output() tileChange: EventEmitter<string> = new EventEmitter<string>();
 
   public tileKeys: any;
 
-  constructor(private tileProvider: LeafletTileProviderService) {}
+  constructor(
+    public store: Store<any>,
+    private element: ElementRef,
+    private tileProvider: LeafletTileProviderService
+  ) {}
 
   ngOnInit() {
     this.tileKeys = Object.keys(this.tileProvider.baseMaps);
+  }
+
+  ngAfterViewInit() {
+    let selectEl = this.element.nativeElement.querySelector('#map-tile-selector');
+
+    // TODO: unsuscribe once it fired once already
+    this.store
+      .select('map')
+      .subscribe((state: any) => {
+        if (state.tileProvider !== null && selectEl !== null && selectEl.value !== state.tileProvider) {
+          console.log('trigger');
+
+          selectEl.value = state.tileProvider;
+        }
+      })
+      ;
   }
 
   onTileChange(event) {
Add subscriber to reflect the currently selected map tile provider
