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


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

Plunker Example:


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. 


  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';  
       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 ngui-sticky>  

Note: Special thanks to ng2-ui


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