@wolsok/thanos v16.0.1
@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 --savePrepare 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
WsThanosModulein imports and exports withWsThanosDirective - Replace
WsThanosModule.forRoot(options): Before:
After:@NgModule({ imports: [WsThanosModule.forRoot(options)] })@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 towsThanos