@wolsok/thanos

An angular directive that vaporizes your DOM Elements like Thanos snaps his fingers. This library is generated with Nx.

Live Demo:

Click the technology cards on https://angularexamples.wolsok.de/home?thanosDemo=true

Usage

Dependencies:

To install run

npm install @wolsok/thanos --save

Prepare your angular app:

Add WsThanosDirective to your module/standalone component.

@NgModule_or_@Component({
  ...,
  imports: [
    ...
    WsThanosDirective
  ],
  providers: [
    // override the default options
    provideWsThanosOptions({
      animationLength: 2000,
      particleAcceleration: 50,
      maxParticleCount: 10000
    }),
  ]
})

You can also add WsThanosDirective to your shared module exports.

@NgModule({
  imports: [WsThanosDirective],
  exports: [WsThanosDirective],
})
export class SharedModule {}

WsThanosOptions to configure ws-thanos:

field	type	default	description
animationLength	number	5000	the animation length in ms
maxParticleCount	number	400000	max amount of particles
particleAcceleration	number	30	speed of the particle acceleration

WsThanosDirective usage

Use the directive wsThanos on your element and reference it using @ViewChild(WsThanosDirective) in your component or directly in html via template ref:

<div wsThanos
  #thanos="thanos"
  (wsThanosComplete)=onComplete()>
  This div will be vaporized on click
  </div>
<button (click)="thanos.vaporizeAndScrollIntoView(removeElement)">

WsThanosService usage

Inject the 'WsThanosService' into your class. Call 'vaporizeAndScrollIntoView(removeElement)' and subscribe to it.

Collaboration

Send issues or PRs to https://github.com/wolsok/wol-sok-mono

Run nx test ws-thanos to execute unit tests.

Migration

From 1.0.1 to 2.0.0

• Replace WsThanosModule in imports and exports with WsThanosDirective
• Replace WsThanosModule.forRoot(options): Before:

  @NgModule({
   imports: [WsThanosModule.forRoot(options)]
  })

  After:

  @NgModule({
   imports: [WsThanosDirective],
   providers: [
     provideWsThanosOptions(options)
   ]
  })

From: sc-thanos to @wolsok/thanos

• Remove old version npm uninstall sc-thanos
• Install npm install @wolsok/thanos --save
• The earlier name of this component was scThanos. Just switch to wsThanos