Menu
ngx-image-marker for MarkerJs2/MarkerLive annotations on images from @ibenvandeveire/ngx-layout. ZoneJS workarounds included.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Template directives ngxIsAuthenticated, ngxHasFeature, ngxHasPermission and impure pipes from @ibenvandeveire/ngx-authentication.
Route guards from @ibenvandeveire/ngx-authentication: NgxIsAuthenticatedGuard, NgxHasFeatureGuard, NgxHasPermissionGuard. Use with NgxAuthenticatedRoute data.
NgxAuthenticatedHttpClient and provideNgxAuthenticationConfiguration httpClientConfiguration. Use for base URL, withCredentials, authenticated interceptors, and download helper.
NgxAuthenticationAbstractService state: user$, session$, metadata$, hasFeature, hasPermission, global features. Use after provideNgxAuthenticationConfiguration.
Bootstrap @ibenvandeveire/ngx-authentication with provideNgxAuthenticationConfiguration and NgxAuthenticationAbstractService. Use when wiring sign-in/out and auth types.
Angular wrapper for CookieConsent V3 and cookie helpers from @ibenvandeveire/ngx-cookies. Use for setupCookiesHandler, consent observables, set/get/remove cookie, or *hasCookie directive.
| name | ngx-layout-image-marker |
| description | ngx-image-marker for MarkerJs2/MarkerLive annotations on images from @ibenvandeveire/ngx-layout. ZoneJS workarounds included. |
MarkerJs2 + MarkerLive. Some MarkerJs2 features reimplemented for ZoneJS compatibility.
<ngx-image-marker
image="/assets/plan.png"
imageDescription="Floor plan"
[canEdit]="editing()"
[startState]="markerState()"
(stateUpdated)="markerState.set($event)"
/>
| Input/Output | Purpose |
|---|---|
canEdit | Edit vs view mode |
startState | Initial annotations |
stateUpdated | Emits on edit changes |
markerClicked | View mode marker click |
zoomLevels / currentZoomLevel | Zoom control |
markerTypes | Restrict tools — separate types for view vs edit packages |
Classes map to MarkerJS style settings: ngx-image-marker-toolbar, -toolbox, -notes-area, etc.
No keyboard support in MarkerJS — inform users; compliance work in progress.