Showing posts with label ng2-ui-scrollable. Show all posts
Showing posts with label ng2-ui-scrollable. Show all posts
ng2-ui-scrollable

ng2-ui-scrollable

October 22, 2017
Angular2 Automatic Scroll Detection With Animation

Note

After 0.9.0 or higher, ng2-scrollable has been changed to @ngui/scrollable. Here are the changes
  • Module ng2-scrollable is changed to @ngui/scrollable
  • Direvtive ng2-scrollable is changed to ngui-scrollable
  • Class name Ng2ScrollaleModule is changed to NguiScrollableModule

Demo

Plunker Example: https://plnkr.co/edit/wLVudY?p=preview&open=app.component.ts

Install

  1. install @ngui/scrollable
     $ npm install @ngui/scrollable --save-dev  
    
  2. add map and packages to your systemjs.config.js
     map['@ngui/scrollable'] = 'node_modules/@ngui/scrollable/dist/scrollable.umd.js';  
    
  3. import NguiScrollableModule to your AppModule
  4.   import { NguiScrollableModule } from '@ngui/scrollable';  
      @NgModule({  
       imports: [BrowserModule, FormsModule, NguiScrollableModule],  
       declarations: [AppComponent],  
       bootstrap: [ AppComponent ]  
      })  
      export class AppModule { }  
    

Usage it in your code

 <ul>  
    <li [class.current]="id=='s1'" (click)="scrollable.el.scrollTo('s1')">One  
    <li [class.current]="id=='s2'" (click)="scrollable.el.scrollTo('s2')">Two  
    <li [class.current]="id=='s3'" (click)="scrollable.el.scrollTo('s3')">Three  
    <li [class.current]="id=='s4'" (click)="scrollable.el.scrollTo('s4')">Four  
    <li [class.current]="id=='s5'" (click)="scrollable.el.scrollTo('s5')">Five  
    <li [class.current]="id=='s6'" (click)="scrollable.el.scrollTo('s6')">Six  
    <li [class.current]="id=='s7'" (click)="scrollable.el.scrollTo('s7')">Seven  
    <li [class.current]="id=='s8'" (click)="scrollable.el.scrollTo('s8')">Eight  
    <li [class.current]="id=='s9'" (click)="scrollable.el.scrollTo('s9')">Nine  
   </ul>  
   <div class="scrollable" (scrolledTo)="id=$event" ngui-scrollable>  
    <div id="s1">One</div>  
    <div id="s2">Two</div>  
    <div id="s3">Three</div>  
    <div id="s4">Four</div>  
    <div id="s5">Five</div>  
    <div id="s6">Six</div>  
    <div id="s7">Seven</div>  
    <div id="s8">Eight</div>  
    <div id="s9">Nine</div>  
   </div>  

For full example, please check out test directory to see the example of;
  • systemjs.config.js
  • app.module.ts
  • and app.component.ts

LICENSE

MIT


Note: Special thanks to ng2-ui

Contact: allenhwkim@gmail.com

Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developers.