✨ RNC - Lazy Component - Angular ✨

#Medium article

Description

Simple directive to use in components in lazy mode, without losing the use of @Input or @Output

Installation

Right now the directive has only been tested on Angular12+ but it should work with older versions as well

npm i rnc-lazy-component

Inputs

The current developments directive accepts 4 inputs including: outputs, component, inputs and show.

| INPUT | DESCRIPTION | DEFAULT | REQUIRED | ------ | ------ | ----- | ----- | | show | If TRUE the component will be loaded | TRUE | NO | component | The component that we can lazy-load | undefined | YES | inputs | Object that contain the inputs that we want to pass to the lazy-component | undefined |NO | outputs | Object that contain the outputs that we want to pass to the lazy-component | undefined | NO

Example

Keep in mind that a complete example will be made using all the library features but that only the "component" input is a mandatory.

Remember to remove the component from your module.ts

Parent component.ts

// DECLARED VARS
   inputs = {NAME_OF_LAZY_COMPONENT_INPUT: 'Hi there!'};
   component;
   output = {NAME_OF_LAZY_COMPONENT_OUTPUT: (data) => this.myFunction1(data), NAME_OF_LAZY_COMPONENT_OUTPUT2: () => this.myFunction2()};

// LOADING OUR LAZY COMPONENT
 loadLazyComponent() {
    this.component = import('./PATH/NAME_OF_THE_COMPONENT.component'); // CHOOSING WHAT COMPONENT WE NEED
    this.show = true; // SHOW ONLY WHEN WE CALL THIS FUNCTION
  }

Parent component.html

// LOADING OUR LAZY COMPONENT
<ng-template libLazyComponent [outputs]="output"  [component]="component" [inputs]="inputs"></ng-template>

Lazy child component.ts

// DECLARED VARS
  @Input() NAME_OF_LAZY_COMPONENT_INPUT;
  @Output() NAME_OF_LAZY_COMPONENT_OUTPUT = new EventEmitter();
  @Output() NAME_OF_LAZY_COMPONENT_OUTPUT2 = new EventEmitter();

Lazy child component.html

<h1>{{NAME_OF_LAZY_COMPONENT_INPUT}}</h1>