Can't bind to 'config' since it isn't a known property of 'maphilight' error in angular 8

Question

I'm using angular 8 and i want to use maphilight to pick a pre defined part in image map like (nose, eye, ... ) :

I have installed maphilight using this command >>> npm i ng-maphilight --save In my app.module.ts, I have added MaphilightModule to imports array. In my component (html) , the maphilight map was added as a container element

 <div class="body-img">
    <maphilight
            id="statesMap"
            [hidden]="hidden"
            [config]="config"
          >
            <img src="../../assets/image1.png" class="map" alt="bodyChart" usemap="#bodyChart" >

            <span *ngFor="let c of bodyAreas; let pickIndex=index; let count=index">
                <span *ngIf="c.picked" (click)="pick(pickIndex)" class="pick-span"
                    [ngStyle]="c.style">{{ c.title }} </span>
            </span>
        <map name="bodyChart" >
            <area *ngFor="let c of bodyAreas; let areaIndex=index" [title]="c.title" [alt]="c.alt" [shape]="c.shape" [coords]="c.coords" (click)="pick(areaIndex)" />
        </map>
    </maphilight>
  </div>

and in myComponent (ts) i have used the maphilightComponent as the following >>

@ViewChild(MaphilightComponent, {static: false}) maphilightComponent: MaphilightComponent;
hidden = false
  public config = {
    fade: true,
    alwaysOn: false,
    neverOn: false,

    // fill
    fill: true,
    fillColor: '#ffffff',
    fillOpacity: 0.4,

    // stroke
    stroke: true,
    strokeColor: '#4d0ec0',
    strokeOpacity: 1,
    strokeWidth: 1,

    // shadow:
    shadow: true,
    shadowColor: '#000000',
    shadowOpacity: 0.8,
    shadowRadius: 10
  }

 ngAfterViewInit() {
    // Make sure image is initially visible while maphilight.js loads (and *then* hide it).
    // Otherwise the $(img).height() in maphilight.js may return 0, which causes mouseover effect to break.
    // See also:
    // - https://stackoverflow.com/questions/1472303/jquery-get-width-of-element-when-not-visible-display-none
    // - https://stackoverflow.com/questions/2345784/jquery-get-height-of-hidden-element-in-jquery
    this.maphilightComponent.events.imgLoaded.subscribe(() => {
      console.log("img.height=", this.maphilightComponent.img.height,
                  "$(this.img).height()=", window.jQuery(this.maphilightComponent.img).height())
      //this.hidden = true
    })
    this.maphilightComponent.events.updateMaphilight.subscribe(() => {
      console.log('updateMaphilight')
    })
  }

I have this error

Uncaught Error: Template parse errors: Can't bind to 'config' since it isn't a known property of 'maphilight'. (" id="statesMap" [hidden]="hidden" [ERROR ->][config]="config" > [ERROR ->]) at JitCompiler._compileComponents (:4200/vendor.js:108430) at :4200/vendor.js:108343 at Object.then (:4200/vendor.js:84703) at JitCompiler._compileModuleAndComponents (:4200/vendor.js:108342)

Any advise please.

Answer 1

You have installed the unsupported version of the npm library please use https://www.npmjs.com/package/ng-maphilight

You should have used npm i ng-maphilight --save instead of npm i maphilight --save

Please follow the steps specified here : https://github.com/TylerRick/ng-maphilight

Answer 2

I think you should use ng-maphilight instead of just maphilight and the command to install is as follows

npm i ng-maphilight --save

Please check the docs