FinlexSidebar (@finlexlabs/sidebar)

Library Name: finlex-sidebar Package Name: @finlexlabs/sidebar Repo Name: fx-ng-components

Steps to Build & Publish Library

Package Renaming

Go to ./src/finlex-sidebar/package.json Rename package name from finlex-sidebar to @finlexlabs/sidebar

Build

npm run build:sidebar

It will build finlex-sidebar using ng-packagr. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build:sidebar, go to the dist folder cd dist/finlex-sidebar and run npm publish.

Finlex Sidebar

Background knowledge:

1. Read here an intro to Angular Entry components
2. Read here an intro to Dynamic component loader

• Finlex Sidebar is a dynamic component that loads another component inside it dynamically at run time.

(TL;DR) Simple example to use Finlex Sidebar:

module.ts

import { FinlexSidebarModule } from '@finlexlabs/sidebar';

@NgModule({
	imports: [
		FinlexSidebarModule
	]
)

export class ProductsModule { }

view.ts

  import { SidebarService } from '@finlexlabs/sidebar';


  constructor(public sidebarService: SidebarService) { }
  const sub = this.sidebarService
      .open(ExampleComponent,  // THIS COULD BE ANY COMPONENT
     {
        resolver: null,
        headline: this.translate.instant('HEADLINE'),
        bindings: { data: data }
      })

Finlex Sidebar Component

1. Finlex Sidebar Component is an entry component that will be instantiated dynamically and it will also inject and load provided component inside its body.

2. Explanation of each type property value and other properties of SidebarService will follow below.

FinlexSidebarComponent properties:

Properties

• componentHolder (type: ComponentHolderDirective) -> It will hold the reference where dynamic component will be inserted.
• childComponentType (type: Type) -> It will hold type of component that has to create.
• componentRef (type: ComponentRef) -> it will hold a reference to the instance of the sidebar component that we will create.
• opened (type: boolean) -> It will hold the state of the sidebar either is open or not
• headline (type: string) -> heading of the sidebar
• ANIMATION_TIMEOUT (type: number) -> animation timeout

Functions

• close: (params: none) -> used to close the sidebar.
• loadChildComponent: (params: none) -> This method takes the type of the child-component as a parameter. We then use this type to resolve the factory for this component. With the help of the factory and the componentHolder, we then instantiate the dynamic child-component.

SidebarService class

1. This class is an injectable service used to open and close sidebar.

2. Explanation of each type property value and other properties of SidebarService will follow below.

SidebarService properties:

Properties

• sidebarComponentRef (type: ComponentRef) -> The will hold the refrence to the dynamically generated component.

Functions

• open: (params: Type, SidebarConfig) -> used to open sidebar with a child-component to be loaded and an optional config object. The open method will return an instance of SidebarRef.
• close: (params: none) -> used to close side bar.
• appendSidebarComponentToBody: (params: SidebarConfig) -> This function will dynamically generate sidebar component, inject provided component into sidebar component and will attatch them to body. This method will return an instance of SidebarRef.
• removeSidebarComponentFromBody: (params: none) -> This function will remove sidebar component from body.