title: Angular4 add WMS (openlayers)
body: <p>I want to add an example <strong>wms-layer</strong> with OpenLayers from a GeoServer to my map in Angular 4 | 2.<br>
  I don't know the right syntax to do this.<br>
  Perhaps someone has some experience with OpenLayers in Angular2 or Angular4?<br>
  Thanks a lot!
  <br>
  <br></p>
  
  <p><strong>map.component.ts</strong></p>
  
  <pre><code>import {Component, OnInit, AfterViewInit, ViewEncapsulation, Input} 
  
  from '@angular/core';
  import { WmslayerService} from '../../wmslayer.service';
  
  
  import * as ol from 'openlayers';
  
  @Component({
    selector: 'olmap',
    encapsulation: ViewEncapsulation.None,
    templateUrl: './map.component.html',
    styleUrls: ['./map.component.css']
  })export class MapComponent implements OnInit, AfterViewInit {
  
    @Input() id3: number;
  
    mapId2: string;
  
    map: ol.Map = undefined;
  
    mapexample: ol.Map = undefined;
  
  
    constructor(private wmslayerService: WmslayerService) {
  
      // generate random id for every map
      this.mapId2 = "map" + Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5);
  
    }
  
  
    ngOnInit() {
      // test service
      console.log(this.wmslayerService.addMyWms());
      console.log(this.wmslayerService.layer);
      //
  
      console.log(this.mapId2);
    }
  
    // render the basic map
    ngAfterViewInit() {
      this.map = new ol.Map({
        target: this.mapId2,
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([37.41, 8.82]),
          zoom: 8
        })
      });
      //
  
      //// add WMS layer to the basic map
      this.mapexample = new ol.layer.Tile({
        extent: [-13884991, 2870341, -7455066, 6338219],
        source: new ol.source.TileWMS({
          url: 'http://osgis.astun.co.uk/geoserver/gwc/service/wms?',
          params: {
            'LAYERS': 'osgb:district_borough_unitary_region',
            'VERSION': '1.1.1',
            'FORMAT': 'image/png',
            'TILED': true
          },
          serverType: 'geoserver'
        })
      });
      map.addLayer(mapexample);
      ////
    }
  
  }
  </code></pre>
  
  <p><br>
  <br>
  <strong>map.component.html</strong></p>
  
  <pre><code>  &lt;div  id={{mapId2}} class="map"&gt;
  
    &lt;div&gt;&lt;app-menue&gt;&lt;/app-menue&gt;&lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>Just for information:<br>
  The idea is to inject from a form, with a service, custom specified url's from a GeoServer to render several layers in the basic map.</p>