perf(ImageLoader): use rxjs from event instead of angular HostBinding api

prevent change detection running on each resize event by using rxjs fromEvent and ouside of ngZone

Author: edoparearyee

README.md

@@ -4,7 +4,7 @@
 
 This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.5.4.
 
-A simple progressive/responsive/lazy loading image library for [Angular (2/4+)][angular] that detects browser size and loads the appropriate image only when the element is in view. Classes are attributed and events emited on image loads. This package requires [angular-inviewport][angular-inviewport].
+A simple progressive/responsive/lazy loading image library for [Angular][angular] that detects browser size and loads the appropriate image only when the element is in view. Classes are attributed and events emited on image loads. This package requires [@thisissoon/angular-inviewport][angular-inviewport].
 
 <img src="https://raw.githubusercontent.com/thisissoon/angular-image-loader/master/src/assets/example.gif" alt="example">
 
@@ -44,13 +44,13 @@ A working example can be found inside [/src](https://github.com/thisissoon/angul
 ### `app.component.html`
 
 ```html
-<sn-image-loader 
-	[image]="image"
-	[sizes]="sizes"
-	imgClass="foo"
-	alt="lorem ipsum"
-	(placeholderLoaded)="onPlaceholderLoad($event)"
-	(imageLoaded)="onImageLoad($event)">
+<sn-image-loader
+  [image]="image"
+  [sizes]="sizes"
+  imgClass="foo"
+  alt="lorem ipsum"
+  (placeholderLoaded)="onPlaceholderLoad($event)"
+  (imageLoaded)="onImageLoad($event)">
 </sn-image-loader>
 ```
 
@@ -89,7 +89,7 @@ export class AppComponent {
   public onPlaceholderLoad(imageLoadedEvent: ImageLoadedEvent) {
     // Do something
   }
-  
+
   public onImageLoad(imageLoadedEvent: ImageLoadedEvent) {
     // Do something
   }

index.ts

@@ -1,6 +1,6 @@
 export { ImageLoaderModule } from './src/app/image-loader/image-loader.module';
 export { ImageLoaderComponent } from './src/app/image-loader/image-loader.component';
 import { loadedClass, notLoadedClass } from './src/app/image-loader/shared/classes';
-import { eventPathResize, eventResize } from './src/app/image-loader/shared/events';
+import { eventResize } from './src/app/image-loader/shared/events';
 import { ResponsiveImage, RetinaImage, Size } from './src/app/image-loader/shared/image.model';
 import { Breakpoint } from './src/app/image-loader/shared/breakpoint.model';