npm package: @finlexlabs/component-life-cycle
Latest version: 0.0.5

# FinlexComponentLifeCycle (@finlexlabs/component-life-cycle)


Library Name: finlex-component-life-cycle

Package Name: @finlexlabs/component-life-cycle

Repo Name: fx-ng-components


--------------------------------

Steps to Build & Publish Library

--------------------------------


## Package Renaming


Go to `./src/finlex-component-life-cycle/package.json`

Rename package name from `finlex-component-life-cycle` to `@finlexlabs/component-life-cycle`



## Build
`npm run build @finlexlabs/component-life-cycle`

It will build finlex-component-life-cycle using ng-packagr.

The build artifacts will be stored in the `dist/@finlexlabs/component-life-cycle` directory.


## Publishing

After building your library with `npm run publish @finlexlabs/component-life-cycle`.

---
# Finlex Component Lifecycle Directive
---

This is our own custom implementation to delay the rendering of a components' template until async event has occured data.
Most common use-case is to prevent the components' template to load until some async http call (to fetch required data) is completed.

Basically, this component comprises of three angular artifacts:

1. [lifecycle directive](https://bitbucket.org/finlex-development-team/fx-ng-components/src/3d85b6ba0b7f44f1c2edf7e360f559c376aa9796/src/finlex-component-life-cycle/src/lib/finlex-component-life-cycle.directive.ts)

2. [loading component](https://bitbucket.org/finlex-development-team/fx-ng-components/src/3d85b6ba0b7f44f1c2edf7e360f559c376aa9796/src/finlex-component-life-cycle/src/lib/placeholder-components/loading/loading.component.ts)

3. [error component](https://bitbucket.org/finlex-development-team/fx-ng-components/src/3d85b6ba0b7f44f1c2edf7e360f559c376aa9796/src/finlex-component-life-cycle/src/lib/placeholder-components/error/error.component.ts)

---
## (TL;DR) Simple example to use lifecycle directive for async template rendering:

#### module.ts
```
import { FinlexComponentLifeCycleModule } from '@finlexlabs/component-life-cycle';

@NgModule({
  imports: [
    FinlexComponentLifeCycleModule,
  ]
})
export class ProductsModule { }

```

#### controller.ts
```
import { FinlexComponentLifeCycleStatus } from '@finlexlabs/component-life-cycle';


lifecycleStatus: FinlexComponentLifeCycleStatus;

constructor(){}

ngOnInit(){
    this.someService.someAsyncCall()
    .subscribe(
        success => {
        // success handler 
        this.lifecycleStatus = FinlexComponentLifeCycleStatus.READY;
        },
    error => this.lifecycleStatus = FinlexComponentLifeCycleStatus.ERROR
}
```

#### view.ts
```
<!-- use the directive on the first div tag -->
<div *lifecycle="lifecycleStatus">
    <!-- here you can have your component's normal template -->
</div>
```

---

- Possible FinlexComponentLifeCycleStatus enum values and their meaning:
    - **LOADING** :- loads the "loading component" template instead of host component template.
    - **ERROR** :- loads the "error component" template instead of host component template.
    - **READY** :- load the actual component template (host component).

> Note:

>1. The default FinlexComponentLifeCycleStatus is LOADING. So if we use the `lifecycle` directive, we MUST update the status to either READY or ERROR.

>2. Its not necessary the async call is an http call. It could be any async action (timeout, callback).

>3. The status of `lifecycle` component can be updated any time and to any valid value (e.g. ERROR -> READY is also possible). 

>Remember:

> Even though we are usually using the lifecycle directive on the main/first div of the component, its not necessary to do that.
> One component can have multiple `lifecycle` directives and each can have their own lifecycle (LOADING -> READY/ERROR).
> So the `lifecycle` directive can also be used for any other html tag in the template.
> In this case, the lifecycle will only show loading or error template inside the html tag containing the `lifecycle` directive.