An angular directive that vaporizes your DOM Elements like Thanos snaps his fingers. This library is generated with Nx.
Click the technology cards on https://angularexamples.wolsok.de/home?thanosDemo=true
To install run
npm install @wolsok/thanos --save
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 {}
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 |
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)">
Inject the 'WsThanosService' into your class. Call 'vaporizeAndScrollIntoView(removeElement)' and subscribe to it.
Send issues or PRs to https://github.com/wolsok/wol-sok-mono
Run nx test ws-thanos
to execute unit tests.
From 1.0.1
to 2.0.0
- Replace
WsThanosModule
in 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