How to use ammaps of amcharts in angular 2?

Question

I am trying to use ammaps inside a angular 2 application. Looking at the code It's pretty obvious that my component is not aware of the library.
this is what my files looks like:
map.component.html

<script src="http://www.ammap.com/lib/ammap.js" type="text/javascript">   </script>
<script src="http://www.ammap.com/lib/maps/js/worldLow.js"  type="text/javascript"></script>


<div id="mapdiv" style="width: 600px; height: 400px;"></div>

map.component.ts

import { Component } from '@angular/core';

//saw this on another SO article so that 
//typescript does not shout for type not defined

declare var AmCharts: any;

@Component({
selector: 'newsmap-map',
templateUrl: 'app/views/map.component.html',
directives: [],
styleUrls: ['app/css/map.component.css']
})

export class MapComponent { 

AmCharts: any;
//using ngOnint to call the required 
//javascript that I've pulling in the html file
ngOnInit(){
     this.AmCharts = new AmCharts({
        makeChart( "mapdiv", {

          "type": "map",


          "dataProvider": {
            "map": "worldLow",
            "getAreasFromMap": true
          },


          "areasSettings": {
            "autoZoom": true,
            "selectedColor": "#CC0000"
          },


          "smallMap": {}
        } )

    }
}

}

Now how do I make this work? This is the guide my ammaps.

Thanks!

score 0 · Answer 1 · edited May 23 '17 at 11:47

Script tags will not work in Angular 2 templates, you can, however, put your non-angular code into index HTML and it will work.

If you want to use code in Angular 2, you need to import it and load it with Ststem.js. You just need to find a working AmCharts library on npm.

Take a look at this: Angular 2 and AmCharts

For future reference, you should use a search engine before posting questions.

How to use ammaps of amcharts in angular 2?

1 Answers1