angular 2 meets openlayers 3, with data and controls

app.component.ts

import {Component} from 'angular2/core';

declare var ol: any;


@Component({
    selector: 'my-map-app',
    template: `<h1>My first openlayers 3 Angular 2 App with data</h1>
    <p id="myposition"></p>
    <div id="map" class="map"></div>
    `
})
export class AppComponent { 

	ol: any;
	constructor() {
	var mousePosition = new ol.control.MousePosition({
		coordinateFormat: ol.coordinate.createStringXY(2),
		projection: 'EPSG:4326',
		target: document.getElementById('myposition'),
		undefinedHTML: '&nbsp;'
	});

	var myScaleLine = new ol.control.ScaleLine({
        units: 'nautical', // 'degrees', 'imperial', 'nautical', 'metric', 'us'
        minWidth: 150
	});


	var starting_pos = ol.proj.transform([18.000, 56.00000], 'EPSG:4326', 'EPSG:900913');
	var zoomslider = new ol.control.ZoomSlider();

	var map = new ol.Map({
        controls: ol.control.defaults({
			attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
				collapsible: false
			})
        }).
        extend([
			new ol.control.ZoomSlider(),
			mousePosition,
			myScaleLine
        ]),
        layers: [
			new ol.layer.Tile({
				source: new ol.source.OSM()
			})
        ],
        target: 'map',
        view: new ol.View({
        	projection: 'EPSG:900913',
			center: starting_pos,
			zoom: 7
        })
	});




	//map.addControl(myScaleLine);

	var vessels = [];

	var iconFeature = new ol.Feature({
		geometry: new ol.geom.Point(ol.proj.transform([18.0704, 57.678], 'EPSG:4326',
			'EPSG:900913')),
		name: 'Speed vessel',
		speed: 40,
		course: 350
	});

	var iconFeature1 = new ol.Feature({
		geometry: new ol.geom.Point(ol.proj.transform([18.1234, 55.678], 'EPSG:4326',
			'EPSG:900913')),
		name: 'Large Vessel',
		speed: 30,
		course: 20
	});

	vessels.push(iconFeature);
	vessels.push(iconFeature1);

	var vectorSource = new ol.source.Vector({
		features: vessels //add an array of vessels
	});

	var iconStyle = new ol.style.Style({
		image: new ol.style.Icon(/** @type {olx.style.IconOptions} */({
			anchor: [0.85, 0.5],
			opacity: 0.85,
			src: 'img/vessel_red.png'
		}))
	});


	var vectorLayer = new ol.layer.Vector({
		source: vectorSource,
		style: iconStyle
	});
    map.addLayer(vectorLayer);


    }
}