How Use With Angular Template Drivens?

[rodrigorrl]

Hi, Could you help me, how can I use this component with angular 4 template driven? I cant found how can I import the module in my project. Thank you!

[bluecaret]

@rodrigorrl I got mine setup by doing the following:

Import it on the module for the page you will be using it:

import { ImgMapComponent } from 'ng2-img-map';
...
@NgModule({
  declarations: [
    ...
    ImgMapComponent,
    ...
  ], 
  ...
})

And then include it on the actual page itself in the component TS file (you will also need to include ViewChild from Angular):

import { Component, ViewChild } from '@angular/core';
import { ImgMapComponent } from 'ng2-img-map';

Be sure to give it an array to save the points to, as well as the functions for adding/removing markers:

  @ViewChild('imgMap')
  imgMap: ImgMapComponent;
  markers: number[][] = [[25, 25], [50, 50], [75, 75]];
  onMark(marker: number[]) {
    console.log('Markers', this.markers);
  }
  onChange(marker: number[]) {
    console.log('Marker', marker);
  }
  selectMarker(index: number) {
    this.imgMap.markerActive = index;
    this.imgMap.draw();
  }
  removeMarker(index: number) {
    this.markers.splice(index, 1);
    if (index === this.imgMap.markerActive) {
      this.imgMap.markerActive = null;
    } else if (index < this.imgMap.markerActive) {
      this.imgMap.markerActive--;
    }
    this.imgMap.draw();
  }

And finally add the HTML

<img-map
          #imgMap
          src="http://placekitten.com/g/800/600"
          markerRadius="30"
          [markers]="markers"
          (mark)="onMark($event)"
          (change)="onChange($event)"
        ></img-map>

I think that's everything to get you started.

[rodrigorrl]

@bluecaret Thank you for your time. I did exactly what you asked for. My front end has multiple modules, one app.module and one module for each one page. But when I added the tag I received the message bellow. Could you help me please? Do you think I should put into a shared class module (I have tried, but without success).

[bluecaret]

@rodrigorrl That error looks like you are not importing ImgMapComponent in the same module that you are importing your page at. Make sure your page and that component are declared on the same module file.

[rodrigorrl]

The ImgMapComponent is in the same module of the page that I need for. When I run ng serve that works fine, but when I run ng build --prod it doesnt work and I receive the error below:

I think this could be the same error related in this topic: https://github.com/angular/angular/issues/15890 My angular/core is 4.4.2 and the angular/core of the ImgMapComponent is 2.0.0-rc.4

[soniclasser]

I have the same error I'm using angular 6

The ImgMapComponent is in the same module of the page that I need for. When I run ng serve that works fine, but when I run ng build --prod it doesnt work and I receive the error below:

I think this could be the same error related in this topic: angular/angular#15890 My angular/core is 4.4.2 and the angular/core of the ImgMapComponent is 2.0.0-rc.4

||

[Rajukumar468]

Its working fine for me ! 👍

[Rajukumar468]

But its only draw circle. Can we draw rectangle and polygon?