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

2. loading component

3. error component

(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.