title: How do I dynamically add popups to markers using OpenLayers 5 in Angular 4?
body: <p>I was wondering if someone could lead me in the right direction of dynamically add popups to a map when clicking on a marker. Currently the example on the OpenLayers website only goes through showing one popup at a time.</p>
  
  <p>[<a href="http://openlayers.org/en/latest/examples/overlay.html?q=popup][1]" rel="nofollow noreferrer">http://openlayers.org/en/latest/examples/overlay.html?q=popup][1]</a></p>
  
  <p>I am putting a spin on the example to make it as 'Angular' friendly as possible and to avoid using JQuery. The biggest wall I keep running into is the use of JQuery to complete the task and a lack of a solid example that does multiple markers.</p>
  
  <pre><code>ngAfterViewInit() {
      this.map.on('singleclick', (evt) =&gt; {
          this.createPopup(evt);
      })
  }
  
  createPopup(evt) {
      const popup = new Overlay({
          insertFirst: false,
          element: this.popupElement.nativeElement,
          positioning: 'bottom-center',
          stopEvent: false,
          offset: [0, -50]
      });
  
      this.map.addOverlay(popup);
  
      const feature = this.map.forEachFeatureAtPixel(evt.pixel, (feat) =&gt; feat);
      if (feature) {
          const coordinates = feature.getGeometry().getCoordinates();
          popup.setPosition(coordinates);
          this.displayPopup = true;
      } else {
          this.displayPopup = false;
      }
  }
  </code></pre>