ngx-spotlight v1.0.0

NGX Spotlight

An angular directive to highlight 🔦 DOM element by adding a overlay layer to the rest of the page

Demo application

Installation

To install this library, run:

$ npm install ngx-spotlight ngx-window-token --save

and then import module:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { NgxSpotlightModule } from 'ngx-spotlight'; // <===

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    NgxSpotlightModule, // <===
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Usage

Simple case

<div ngxSpotlight [auto]="true">
  ...
</div>

Advanced case

<div
  ngxSpotlight="some-id"
  #sl="spotlight"
  [overlay]="false"
  [border]="true"
  [borderWidth]="8"
  [indent]="15"
  (spotlightClick)="console.warn($event)"
>
  <button (click)="sl.isShown ? sl.hide() : sl.show()">Toggle</button>
</div>

Directive can be shown using SpotlightService.

constructor(private spotlightService: SpotlightService) {}

this.spotlightService.getById('some-id').show();
this.spotlightService.getById('some-id').hide();

Inputs

Outputs

There is a spotlightClick event that occurs when a user click on directive elements.

type SpotlightElementName =
  | 'container'
  | 'backdrop-top'
  | 'backdrop-bottom'
  | 'backdrop-left'
  | 'backdrop-right'
  | 'overlay'
  | 'border-top'
  | 'border-bottom'
  | 'border-left'
  | 'border-right';

interface SpotlightClick {
  piece: SpotlightElementName;
  mouse: MouseEvent;
}

Customization

Variables should be declared for a global scope (:root or the body selector).

body {
  --color__spotlight-backdrop_background: black;
  --color__spotlight-border: lightgreen;
}