refactor: migrate to Nx (#34)

Author: yossely

.prettierignore

@@ -0,0 +1,4 @@
+# Add files here to ignore them from prettier formatting
+
+/dist
+/coverage

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "es5"
+}

.travis.yml

@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "nrwl.angular-console",
+    "angular.ng-template",
+    "ms-vscode.vscode-typescript-tslint-plugin",
+    "esbenp.prettier-vscode"
+  ]
+}

.vscode/extensions.json

@@ -6,8 +6,7 @@
 
 [![Quality Gate](https://sonarcloud.io/api/project_badges/quality_gate?project=bikecoders_ngx-sticky)](https://sonarcloud.io/dashboard?id=bikecoders_ngx-sticky) [![Sonar Cloud](https://sonarcloud.io/images/project_badges/sonarcloud-white.svg)](https://sonarcloud.io/dashboard?id=bikecoders_ngx-sticky)
 
-
-## TL;DR:
+## TL;DR
 
 Angular directive that adds sticky position to an HTML element and also applies and remove a custom class when the element is sticky positioned.
 
@@ -16,7 +15,7 @@ Angular directive that adds sticky position to an HTML element and also applies
   <div
     ngxSticky
     classWhenSticky="my-sticky-class"
-    triggerOn="text-content"
+    [triggerOn]="'text-content'"
     [scrollContainer]="scContainer"
   >
     Sticky Title
@@ -26,19 +25,22 @@ Angular directive that adds sticky position to an HTML element and also applies
   </div>
 </div>
 ```
-[![Quick Demo](https://raw.githubusercontent.com/bikecoders/ngx-sticky/master/docs-img/demo-capture.gif)]()
+
+![Quick Demo](https://raw.githubusercontent.com/bikecoders/ngx-sticky/master/docs-img/demo-capture.gif)
 
 ## How to use it
 
 To accomplish the desired behavior you need to take in account the following:
-  - You need to have a scroll container
-  - Inside the scroll container you need:
-    - The sticky element
-    - An element that when the sticky element bypass it, the directive will trigger the custom class. We call this _triggerOn_ element
-  - The _triggerOn_ element **must** be relative positioned (has this css property `position: relative`)
-    - > _We decided that you control this, because adding `position: relative` to an element can change the visual aspect to something not desired and you will asking why and blaming yourself for something that you are not conscious of, so following the [Single Responsibility Principle](https://en.wikipedia.org/wiki/Single_responsibility_principle) this directive will not take care of that_
+
+- You need to have a scroll container
+- Inside the scroll container you need:
+  - The sticky element
+  - An element that when the sticky element bypass it, the directive will trigger the custom class. We call this _triggerOn_ element
+- The _triggerOn_ element **must** be relative positioned (has this css property `position: relative`)
+  - > _We decided that you control this, because adding `position: relative` to an element can change the visual aspect to something not desired and you will asking why and blaming yourself for something that you are not conscious of, so following the [Single Responsibility Principle](https://en.wikipedia.org/wiki/Single_responsibility_principle) this directive will not take care of that_
 
 `dummy.component.scss`
+
 ```scss
 .scroll-container {
   border: #cccccc 1px solid;
@@ -48,7 +50,7 @@ To accomplish the desired behavior you need to take in account the following:
 }
 
 .title {
-  background-color: #1C5089;
+  background-color: #1c5089;
   color: #ffffff;
   font-size: 32px;
   font-weight: bold;
@@ -61,18 +63,20 @@ To accomplish the desired behavior you need to take in account the following:
 }
 
 .my-sticky-class {
-  background-color: #1C8950 !important;
-  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.4);
+  background-color: #1c8950 !important;
+  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12),
+    0 3px 5px -1px rgba(0, 0, 0, 0.4);
 }
 ```
 
 `dummy.component.html`
+
 ```html
 <div #scContainer>
   <div
     ngxSticky
     class="title"
-    triggerOn="trigger-on"
+    [triggerOn]="'trigger-on'"
     classWhenSticky="my-sticky-class"
     [scrollContainer]="scContainer"
   >
@@ -84,101 +88,108 @@ To accomplish the desired behavior you need to take in account the following:
 </div>
 ```
 
+### Note
+
+If you're using angular version >= 9 and providing the `triggerOn` value as a string, you need to do it this way `[triggerOn]="'text-content'"` because Ivy changed something about how we pass parameters. There is an [issue](https://github.com/angular/angular/issues/34227) open about it
+
+According to [Ivy Compatibility guide](https://angular.io/guide/ivy-compatibility)
+
+> Unbound inputs for directives (e.g. name in <my-comp name="">) are now set upon creation of the view, before change detection runs (previously, all inputs were set during change detection).
+
 ## Demo
-- online demo: https://bikecoders.github.io/ngx-sticky/
-- [demo-app](https://github.com/bikecoders/ngx-sticky/tree/master/src): Source code available
 
+- [online demo](https://bikecoders.github.io/ngx-sticky/)
+- [demo-app](https://github.com/bikecoders/ngx-sticky/tree/master/src): Source code available
 
 ## Getting started
 
 1. Install `ngx-sticky-directive`:
 
-```bash
-# using npm
-npm install ngx-sticky-directive --save
+   ```bash
+   # using npm
+   npm install ngx-sticky-directive --save
 
-# using yarn <3
-yarn add ngx-sticky-directive
-```
+   # using yarn
+   yarn add ngx-sticky-directive
+   ```
 
 2. Import the installed library:
 
-```ts
-import { StickyDirectiveModule } from 'ngx-sticky-directive';
+   ```ts
+   import { StickyDirectiveModule } from 'ngx-sticky-directive';
 
-@NgModule({
-  ...
-  imports: [
-    ...
-    StickyDirectiveModule
-  ]
-})
-export class AppModule { }
-```
+   @NgModule({
+     ...
+     imports: [
+       ...
+       StickyDirectiveModule
+     ]
+   })
+   export class AppModule { }
+   ```
 
 3. Use it in your component
 
-```ts
-@Component({
-  selector: 'dummy-component',
-  styles: [`
-    .body-container {
-      background-color: yellow;
-      height: 2000px;
-      overflow: scroll;
-      padding: 10px;
-    }
-
-    .super-height {
-      background-color: black;
-      height: 5000px;
-      position: relative;
-      width: 100%;
-    }
-
-    #sticky-component {
-      background-color: green;
-      height: 50px;
-      width: 100%;
-      top: -10px;
-      z-index: 10;
-    }
-
-    .when-sticky {
-      background-color: magenta !important;
-    }
-  `],
-  template: `
-    <div class="body-container" #scCont>
-      <div
-        id="sticky-component"
-        ngxSticky
-        classWhenSticky="when-sticky"
-        triggerOn="trigger-on"
-        [scrollContainer]="scCont"
-      >
-      </div>
-      <div id="trigger-on" class="super-height">
-      </div>
-    </div>
-  `,
-})
-class DummyComponent {
-}
-```
+   ```ts
+   @Component({
+     selector: 'dummy-component',
+     styles: [
+       `
+         .body-container {
+           background-color: yellow;
+           height: 2000px;
+           overflow: scroll;
+           padding: 10px;
+         }
+
+         .super-height {
+           background-color: black;
+           height: 5000px;
+           position: relative;
+           width: 100%;
+         }
+
+         #sticky-component {
+           background-color: green;
+           height: 50px;
+           width: 100%;
+           top: -10px;
+           z-index: 10;
+         }
+
+         .when-sticky {
+           background-color: magenta !important;
+         }
+       `,
+     ],
+     template: `
+       <div class="body-container" #scCont>
+         <div
+           id="sticky-component"
+           ngxSticky
+           classWhenSticky="when-sticky"
+           [triggerOn]="'trigger-on'"
+           [scrollContainer]="scCont"
+         ></div>
+         <div id="trigger-on" class="super-height"></div>
+       </div>
+     `,
+   })
+   class DummyComponent {}
+   ```
 
 ## Properties
 
-| Name  | Description |
-| :---- | :---------- |
-| `@Input() scrollContainer: string | ElementRef | HTMLElement` | Top container of the sticky element that has the scroll. _If an string is provided, it must be the ID of the element._ |
-| `@Input() triggerOn: string | ElementRef | HTMLElement` | When the sticky element bypass this element the custom class will apply. _If an string is provided, it must be the ID of the element._ |
-| `@Input() debugMode: boolean` | Display or hide the sentinel element. |
-| `@Input() classWhenSticky: string` | CSS class to be added to the target element when becomes sticky. |
-| `@Input() zIndex: number = 10` | CSS `zIndex` value to set to the target element. By default is 10. |
-| `@Input() top: number = 0` | CSS `top` value to set to the sticky element. By default is 0. |
+| Name                                                          | Description                                                                                                                            |
+| :------------------------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------------------- |
+| `@Input() scrollContainer: string | ElementRef | HTMLElement` | Top container of the sticky element that has the scroll. _If an string is provided, it must be the ID of the element._                 |
+| `@Input() triggerOn: string | ElementRef | HTMLElement`       | When the sticky element bypass this element the custom class will apply. _If an string is provided, it must be the ID of the element._ |
+| `@Input() debugMode: boolean`                                 | Display or hide the sentinel element.                                                                                                  |
+| `@Input() classWhenSticky: string`                            | CSS class to be added to the target element when becomes sticky.                                                                       |
+| `@Input() zIndex: number = 10`                                | CSS `zIndex` value to set to the target element. By default is 10.                                                                     |
+| `@Input() top: number = 0`                                    | CSS `top` value to set to the sticky element. By default is 0.                                                                         |
 
-## Why?
+## Why
 
 Adding a custom class when an element becomes sticky is the objective of this directive. This is achieved by using [Intersection Observer](https://developer.mozilla.org/docs/Web/API/Intersection_Observer_API) and avoid using scroll events to keep a good performance.
 
@@ -193,10 +204,10 @@ The intention of this directive is to implement the article [An event for CSS po
 > The Intersection Observer API is highly [supported](https://caniuse.com/#feat=intersectionobserver) across the different browsers, however if you have a target audience that is not currently being supported you can use the [Intersection Observer Polyfill](https://github.com/w3c/IntersectionObserver/tree/master/polyfill)
 
 ### References
+
 - [An event for CSS position:sticky](https://developers.google.com/web/updates/2017/09/sticky-headers)
 - [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Creating_an_intersection_observer)
 
-
 ## Development tips
 
 If you want to contribute with features, we recommend to read the section that we wrote about Development Tips that is in the