16.0.1 • Published 1 year ago

@wolsok/thanos v16.0.1

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

@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:

fieldtypedefaultdescription
animationLengthnumber5000the animation length in ms
maxParticleCountnumber400000max amount of particles
particleAccelerationnumber30speed 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