Angular geo directive test (suncalc, https://stackblitz.com/edit/angular-fkdp2e) WIP

app.component.html

<div class='app-container'>
  <span geo>
     My love
   </span>
</div>
                

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { GeoColorDirective } from './geo-color.directive';

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, GeoColorDirective ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

geo-color-directive.ts

import {Directive, Input,ElementRef, TemplateRef, ViewContainerRef, OnInit, OnDestroy} from '@angular/core';
import {Observable, Observer, Subscription} from "rxjs";
import { IJson } from './util';
/// <reference path="../typings/suncalc.d.ts" />
"use strict";
import SunCalc = require("suncalc");

@Directive(
    {
        selector: '[geo]'        
    }
)

export class GeoColorDirective implements OnInit, OnDestroy {
    private _currentFontSize = 2;
    private _subscription: Subscription; 
  
    constructor(private _el: ElementRef) {       
    }

    ngOnInit() {
      console.log("hi");
      // this._subscription = Observable
      //   .interval(1000)
      //   .switchMap(x => this.getCurrentPosition().retry(3))        
      //   .subscribe(pos => {
      //     console.log(`Hi, lat: ${pos.coords.latitude} - long: ${pos.coords.longitude}`);
      //     // get today's sunlight times for London
      //     var times = SunCalc.getTimes(new Date(), pos.coords.latitude, pos.coords.longitude);
          
      //     // format sunrise time from the Date object
      //     var sunriseStr = times.sunrise.getHours() + ':' + times.sunrise.getMinutes();

      //     // get position of the sun (azimuth and altitude) at today's sunrise
      //     var sunrisePos = SunCalc.getPosition(times.sunrise, 51.5, -0.1);

      //     // get sunrise azimuth in degrees
      //     var sunriseAzimuth = sunrisePos.azimuth * 180 / Math.PI;         

      //     console.log("\t times:" + times);
      //     console.log("\t sunrise Str:" + sunriseStr);
      //     console.log("\t sunrise Pos:" + sunrisePos);
      //     console.log("\t sunriseAzimuth:" + sunriseAzimuth);
      //     // this._currentFontSize += 5;
      //     // this._changeFontSize(this._currentFontSize.toString() + 'px');
      //   });
    }

    private _changeFontSize(fontSize: string) {
        this._el.nativeElement.style.fontSize = fontSize;
    }

    getCurrentPosition(geoLocationOptions?: IJson): Observable<any> {
      geoLocationOptions = geoLocationOptions || { timeout: 1000 };

      return new Observable<any>((responseObserver: Observer<any>) => {
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(
            (position) => {
              responseObserver.next(position);
              responseObserver.complete();
            },
            (evt) => responseObserver.error(evt),
            geoLocationOptions
          );
        } else {
          responseObserver.error('Browser Geolocation service failed.');
        }
      });
    }
    

    ngOnDestroy() {
       this._subscription.unsubscribe();
    }
}

index.html

<style>
  html body {
	  margin: 0;
	  padding: 0;
	  height: 100%;
	  width: 100%;
  }
</style>
<my-app>loading</my-app>

suncalc.d.ts

interface SunlightTimes {
  sunrise: Date;
  sunriseEnd: Date;
  goldenHourEnd: Date;
  solarNoon: Date;
  goldenHour: Date;
  sunsetStart: Date;
  sunset: Date;
  dusk: Date;
  nauticalDusk: Date;
  night: Date;
  nadir: Date;
  nightEnd: Date;
  nauticalDawn: Date;
  dawn: Date;
}

interface SunPosition {
  altitude: number;
  azimuth: number;
}

interface MoonPosition {
  altitude: number;
  azimuth: number;
  distance: number;
  parallacticAngle: number;
}

interface MoonIllumination {
  fraction: number;
  phase: number;
  angle: number;
}

interface MoonTimes {
  rise: Date;
  set: Date;
  alwaysUp: boolean;
  alwaysDown: boolean;
}

declare module 'suncalc' {
  function getTimes(date: Date, latitude: number, longitude: number): SunlightTimes;
  function getPosition(timeAndDate: Date, latitude: number, longitude: number): SunPosition;
  function getMoonPosition(timeAndDate: Date, latitude: number, longitude: number): MoonPosition;
  function getMoonIllumination(timeAndDate: Date): MoonIllumination;
  function getMoonTimes(date: Date, latitude: number, longitude: number, inUTC?: boolean): MoonTimes;
}

util.ts

/**
 * json type definition
 */
/* tslint:disable */
//interface IJsonArray extends Array<string|number|boolean|Date|IJson|IJsonArray> { }
export interface IJson {
  //[x: string]: string|number|boolean|Date|IJson|IJsonArray;
  [x: string]: string|number|boolean|Date|IJson|Array<string|number|boolean|Date|IJson>;
}
/* tslint:enable */