I'm working with Angular 8 and I need to implement maphilight to select specific predefined areas on an image map (e.g. nose, eye, etc.)
https://i.sstatic.net/Bevyg.png
To integrate maphilight into my project, I used the following command: npm i ng-maphilight --save In my app.module.ts file, I imported MaphilightModule in the imports array. Within my component's HTML file, I added the maphilight map 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>
In my component's TypeScript file, I referenced the maphilightComponent like this:
@ViewChild(MaphilightComponent, {static: false}) maphilightComponent: MaphilightComponent;
hidden = false
public config = {
// configuration settings here
}
ngAfterViewInit() {
// code for initialization
}
The error message I encountered is:
Uncaught Error: Template parse errors: Can't bind to 'config' since it isn't a known property of 'maphilight'. 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 advice on how to resolve this issue would be greatly appreciated.