feat(module): Support for Native Element in both Target and Container

README.md

@@ -284,43 +284,36 @@ export class MyService {
     <th align="left">Options</th>
     <th align="left">Type</th>
     <th align="left">Default</th>
-    <th align="left">Accepts</th>
   </tr>
   <tr>
     <td><a href="#ngx-scroll-to-details">ngx-scroll-to</a></td>
-    <td><code>string</code> | <code>number</code> | <code>ElementRef</code></td>
+    <td><code>string</code> | <code>number</code> | <code>ElementRef</code> | <code>HTMLElement</code></td>
     <td><code>''</code></td>
-    <td>Any <code>string</code>, <code>number</code> or <code>ElementRef</code> value</td>
   </tr>
   <tr>
     <td><a href="#ngx-scroll-to-event-details">ngx-scroll-to-event</a></td>
     <td><code>ScrollToEvent</code></td>
     <td><code>click</code></td>
-    <td><code>ScrollToEvent</code></td>
   </tr>
   <tr>
     <td><a href="#ngx-scroll-to-duration-details">ngx-scroll-to-duration</a></td>
     <td><code>number</code></td>
     <td><code>650</code></td>
-    <td>Any <code>number</code> value</td>
   </tr>
   <tr>
     <td><a href="#ngx-scroll-to-easing-details">ngx-scroll-to-easing</a></td>
     <td><code>ScrollToAnimationEasing</code></td>
     <td><code>easeInOutQuad</code></td>
-    <td><code>ScrollToAnimationEasing</code></td>
   </tr>
   <tr>
     <td><a href="#ngx-scroll-to-offset-details">ngx-scroll-to-offset</a></td>
     <td><code>number</code></td>
     <td><code>0</code></td>
-    <td>Any <code>number</code> value</td>
   </tr>
   <tr>
     <td><a href="#ngx-scroll-to-offset-map-details">ngx-scroll-to-offset-map</a></td>
     <td><code>ScrollToOffsetMap</code></td>
     <td><code>new Map()</code></td>
-    <td><code>ScrollToOffsetMap</code></td>
   </tr>
 </table>
 

src/app/+container-target/container-target.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ElementRef } from '@angular/core';
 
 import { ScrollToService } from '../modules/scroll-to/scroll-to.service';
 
@@ -18,7 +18,7 @@ export class ContainerTargetComponent implements OnInit {
   public scrollToElementInAnotherContainer(container, event) {
 
     this._scrollToService.scrollTo({
-      container: 'body',
+      container: '#another-scroll-container',
       target: 'another-scroll-container-destination',
     });
   }

src/app/modules/scroll-to/models/scroll-to-config.model.ts

@@ -6,13 +6,13 @@ import { ScrollToEvent } from './scroll-to-event.model';
 /**
  * The target of the Scroll Animation.
  */
-export type ScrollToTarget = string | number | ElementRef;
+export type ScrollToTarget = string | number | ElementRef | HTMLElement;
 
 /**
  * The container on which the Scroll Animation
  * will happen.
  */
-export type ScrollToContainer = string | number | ElementRef;
+export type ScrollToContainer = string | number | ElementRef | HTMLElement;
 
 /**
  * The Listener Target is responsive for listening

src/app/modules/scroll-to/scroll-to.service.ts

@@ -19,7 +19,8 @@ import {
   isNumber,
   isElementRef,
   isWindow,
-  DEFAULTS
+  DEFAULTS,
+  isNativeElement
 } from './statics/scroll-to-helpers';
 
 /**
@@ -262,6 +263,10 @@ export class ScrollToService {
 
       targetNode = id.nativeElement;
 
+    } else if (isNativeElement(id)) {
+
+      targetNode = id;
+
     }
 
     if (!targetNode) throw new Error('Unable to find Target Element');

src/app/modules/scroll-to/statics/scroll-to-helpers.ts

@@ -118,12 +118,22 @@ export function isWindow(container: any): container is Window {
  * Test if a given value is of type ElementRef.
  *
  * @param value 					The given value
- * @returns 						Whether the given value is a number
+ * @returns               Whether the given value is a number
  */
 export function isElementRef(value: any): value is ElementRef {
   return value instanceof ElementRef;
 }
 
+/**
+ * Whether or not the given value is a Native Element.
+ *
+ * @param value           The given value
+ * @returns               Whether or not the value is a Native Element
+ */
+export function isNativeElement(value: any): value is HTMLElement {
+  return value instanceof HTMLElement;
+}
+
 /**
  * Test if a given value is type number.
  *