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

ng2-ui-sticky

October 25, 2017
Angular2 "position: sticky" implementation as a directive

Demo

https://ng2-ui.github.io/#/sticky
Plunker Example: https://plnkr.co/edit/ZKwAHN?p=preview

Note

After 0.7.0 or higher, ng2-sticky has been changed to @ngui/sticky. Here are the changes
  • Module ng2-sticky has been changed to @ngui/sticky.
  • Direvtive ng2-sticky is moved to ngui-sticky.
  • Class name Ng2StickyModule is moved to NguiStickyModule. 

Install

  1. install @ngui/sticky
      $ npm install @ngui/sticky --save  
    
  2. If you are not using webpack, add map and packages to your systemjs.config.js
     map['@ngui/sticky'] = 'node_modules/@ngui/sticky/dist/sticky.umd.js';
    
  3. import NguiStickyModule to your AppModule
  4.  import { NgModule } from '@angular/core';  
      import { FormsModule } from "@angular/forms";  
      import { BrowserModule } from '@angular/platform-browser';  
      import { AppComponent } from './app.component';  
      import { NguiStickyModule } from '@ngui/sticky';  
      @NgModule({  
       imports: [BrowserModule, FormsModule, NguiStickyModule],  
       declarations: [AppComponent],  
       bootstrap: [ AppComponent ]  
      })  
      export class AppModule { }  
    
For full example, please check out test directory to see the example of
  • systemjs.config.js
  • app.module.ts
  • and app.component.ts

Usage it in your code

 <div class="div-middle">  
   <div>One</div>  
   <div>After</div>  
   <div>Another</div>  
   <div ngui-sticky>  
   <br/><br/><br/>  
   <div>One</div>  
   <div>After</div>  
   <div>Another</div>  
  </div>  


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.