Miss any of our Open RFC calls?Watch the recordings here! »

ngx-element-life

1.0.1 • Public • Published

ngx-element-life Build Status

An angular directive to easy listen when elements get initalised or destroyed.

Donate/Support

If you like my work, feel free to support it. Donations to the project are always welcomed :)

Buy Me A Coffee

PayPal: PayPal.Me/bengtler

BTC Wallet Address: 3QVyr2tpRLBCw1kBQ59sTDraV6DTswq8Li

ETH Wallet Address: 0x394d44f3b6e3a4f7b4d44991e7654b0cab4af68f

LTC Wallet Address: MFif769WSZ1g7ReAzzDE7TJVqtkFpmoTyT

XRP Wallet Address: rXieaAC3nevTKgVu2SYoShjTCS2Tfczqx?dt=159046833

Installation

  • npm install ngx-element-life
  • install @angular/core, @angular/platform-browser and rxjs - they are peer dependencies

For standard webpack, angular-cli and tsc builds

  • import ElementLifeModule from ngx-element-life:
import { ElementLifeModule } from 'ngx-element-life'
  • add ElementLifeModule to the imports of your NgModule:
@NgModule({
  imports: [
    ...,

    ElementLifeModule
  ],
  ...
})
class YourModule { ... }
  • use <div element-life (init)="handleInit()"></div> in your templates to listen on an elements life cycle - init, viewInit and destroy.

For SystemJS builds (Config)

  • add ngx-element-life to your paths:
paths: {
  ...
  'ngx-element-life': 'node_modules/ngx-element-life/bundles/ngx-element-life.umd.js'
}
  • set format and dependencies in packages:
packages: {
  'ngx-element-life': {
    format: 'cjs'
  }
}
  • follow the steps of For standard webpack and tsc builds

ElementLife Directive

Usage

  • selector: element-life - add it as attribute to a html-tag
  • outputs:
    • init - notifies when the element is initialised
    • viewInit - notifies when child views of the element are init
    • destroy - notifies when the element gets destroyed

Example

<div
  element-life
  (init)="handleInit()"
  (viewInit)="handleViewInit()"
  (destroy)="handleDestroy()"
>
  <p>hello</p>
</div>
class MyComponent {
  handleInit() {
    // execute after init
  }
 
  handleViewInit() {
    // execute after view init
  }
 
  handleDestroy() {
    // execute after destroy
  }
}

Install

npm i ngx-element-life

DownloadsWeekly Downloads

0

Version

1.0.1

License

MIT

Unpacked Size

81 kB

Total Files

23

Last publish

Collaborators

  • avatar