npm package: @finlexlabs/sidebar
Description: Library Name: finlex-sidebar Package Name: @finlexlabs/sidebar Repo Name: fx-ng-components
Latest version: 0.0.8

# 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](https://angular.io/guide/entry-components) an intro to Angular Entry components
2. [Read here](https://angular.io/guide/dynamic-component-loader) 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<any>) -> It will hold type of component that has to create.
* componentRef (type: ComponentRef<any>) -> 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<FinlexSidebarComponent>) -> The will hold the refrence to the dynamically generated component.

  

### Functions

* open: (params: Type<any>, 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.