Menu
Guided tours with NgxTourService, tourItem directive, startNgxTour and useMockDataDuringTour from @ibenvandeveire/ngx-inform. Requires CDK overlay CSS.
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-inform-tour |
| description | Guided tours with NgxTourService, tourItem directive, startNgxTour and useMockDataDuringTour from @ibenvandeveire/ngx-inform. Requires CDK overlay CSS. |
Root SCSS: @import '@angular/cdk/overlay-prebuilt.css';
provideNgxTourConfiguration(CustomTourStepComponent);
// or { component, offset: { top, bottom } }
Step component extends NgxTourStepComponent — must include #stepTitle for aria-labelledby. Output handleInteraction: 'next' | 'back' | 'close'.
this.tourService.startTour([
{
title: '…',
content: '…',
tourItem: 'helloWorld', // matches tourItem="helloWorld" on element
position: 'below',
cutoutMargin: 10,
delay: 2000, // wait for DOM; default 100ms skip
beforeVisible / onVisible / afterVisible,
component, disableBackdrop, data, stepClass, offset,
},
], onClose?, startIndex?).subscribe();
Directive: tourItem="id" → adds ngx-tour-item-active when highlighted.
*ngxTourShowWhen — conditional template while tour active.
Observables: tourStarted$, tourEnded$, currentStep$, currentIndex$, previousStep$, currentTour$.
startNgxTour(steps, onClose?, startIndex?, tourService?) — after source emits, forward value when tour endsuseMockDataDuringTour(mock) — swap stream during tour (injection context only)onClose navigate home; may need ChangeDetectorRef.detectChanges() after router.navigate.scrollIntoView; custom scroll if element not found.NgxTourServiceMock.