All Projects → JonnyBGod → Ngx Scrollspy

JonnyBGod / Ngx Scrollspy

Licence: mit
Angular ScrollSpy Service

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to Ngx Scrollspy

Ng2 Smart Table
Angular Smart Data Table component
Stars: ✭ 1,590 (+1591.49%)
Mutual labels:  aot, angular2
ng-seed
Simple Angular seed project with commonly used features.
Stars: ✭ 12 (-87.23%)
Mutual labels:  angular2, aot
Ngx Config
Configuration utility for Angular
Stars: ✭ 135 (+43.62%)
Mutual labels:  aot, angular2
Flutter sticky infinite list
Multi directional infinite list with Sticky headers for Flutter applications
Stars: ✭ 189 (+101.06%)
Mutual labels:  infinite-scroll, sticky
Ngx Cookie Service
Angular (4.2+ ...11) service for cookies. Originally based on the `ng2-cookies` library.
Stars: ✭ 363 (+286.17%)
Mutual labels:  aot, angular2
Ngx Currency
📦 Currency mask module for Angular
Stars: ✭ 161 (+71.28%)
Mutual labels:  aot, angular2
angular2-infinite-scroll
Infinite Scroll Directive For Angular (version 2 up to 2.3.1)
Stars: ✭ 16 (-82.98%)
Mutual labels:  angular2, infinite-scroll
angular-gulp-starter
Simple dev/prod build for Angular (2+) using gulp, systemjs, rollup, ngc (AOT), scss, Visual Studio
Stars: ✭ 18 (-80.85%)
Mutual labels:  angular2, aot
Ngx Meta
Dynamic page title & meta tags utility for Angular (w/server-side rendering)
Stars: ✭ 331 (+252.13%)
Mutual labels:  aot, angular2
angular4-seed-starter
An angular4 starter with webpack2+aot+lazyload+hmr+scss(个人搭的angular4 starter,使用webpack2,包含aot、lazyload、scss、热替换功能等等)
Stars: ✭ 23 (-75.53%)
Mutual labels:  angular2, aot
Ng Sticky
Angular 4 sticky, have header or any component sticky easy to use.
Stars: ✭ 25 (-73.4%)
Mutual labels:  sticky, angular2
Angular2 Express Starter
Angular 8 and Express 👪 ( Heroku ready )
Stars: ✭ 565 (+501.06%)
Mutual labels:  aot, angular2
Egeo
EGEO is the open-source UI library used to build Stratio's UI. It includes UI Components, Utilities, Services and much more to build user interfaces quickly and with ease. The library is distributed in AoT mode.
Stars: ✭ 69 (-26.6%)
Mutual labels:  aot, angular2
Angular2 Questionnaire
Angular Programming Book Part 3 Demo
Stars: ✭ 86 (-8.51%)
Mutual labels:  angular2
Django Infinite Scroll Pagination
🌀 Pagination based on the seek method / keyset paging / offset-less pagination
Stars: ✭ 90 (-4.26%)
Mutual labels:  infinite-scroll
Ngx Persian
A full-featured toolset for Persian Applications Created by Angular (v > 2) containing Pipes, Services, Directives, and javascript Similar Date object for working with Jalali Date.
Stars: ✭ 86 (-8.51%)
Mutual labels:  angular2
Angular Full Stack
Angular Full Stack project built using Angular, Express, Mongoose and Node. Whole stack in TypeScript.
Stars: ✭ 1,261 (+1241.49%)
Mutual labels:  angular2
Angular File Uploader
Angular file uploader is an Angular 2/4/5/6/7/8/9/10 + file uploader module with Real-Time Progress Bar, Responsive design, Angular Universal Compatibility, localization and multiple themes which includes Drag and Drop and much more.
Stars: ✭ 92 (-2.13%)
Mutual labels:  angular2
Recyclerparallax
Android Recycler View with Parallax Effect on each item
Stars: ✭ 90 (-4.26%)
Mutual labels:  parallax
Generator Fountain Angular2
Yeoman 'fountain' generator to start a webapp with Angular 2
Stars: ✭ 84 (-10.64%)
Mutual labels:  angular2

npm version Build Status Codacy Badge Coverage Status devDependency Status

NPM downloads

You can use this angular2 service to spy scroll events from window or any other scrollable element.

This library implements an service to collect observables from scroll spy directives. It can be used to create you own components or if you prefer use on of the following components that leverage this library functionality to accomplish different behaviors:

  • index: create and display and index from content inside and element.
  • affix: make element follow scroll inside its parent.
  • parallax: create very simple parallax effects based on scroll.
  • infinite: infinite scroll

Repository change

Please not that the repository and npm package changed from ng2-scrollspy to ngx-scrollspy

Installation

First you need to install the npm module:

npm install ngx-scrollspy --save

If you use SystemJS to load your files, you might have to update your config with this if you don't use defaultJSExtensions: true:

System.config({
	packages: {
		"ngx-scrollspy": {"defaultExtension": "js"}
	}
});

Finally, you can use ngx-scrollspy in your Angular 2 project. It is recommended to instantiate ScrollSpyService in the bootstrap of your application and to never add it to the "providers" property of your components, this way you will keep it as a singleton. If you add it to the "providers" property of a component it will instantiate a new instance of the service that won't be initialized.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { ScrollSpyModule } from 'ngx-scrollspy';

@NgModule({
  imports: [
  	BrowserModule,
  	ScrollSpyModule.forRoot()
  ],
  declarations: [ AppComponent ], 
  bootstrap: [ AppComponent ]
})

Using

Spy window scroll

Use ScrollSpyDirective to spy on window.

import { NgModule, Component, Injectable, AfterViewInit } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { ScrollSpyModule, ScrollSpyService } from 'ngx-scrollspy';

@Injectable()
@Component({
	selector: 'app',
	template: `<div scrollSpy></div>`
})
export class AppComponent implements AfterViewInit {
	constructor(private scrollSpyService: ScrollSpyService) {}

	ngAfterViewInit() {
		this.scrollSpyService.getObservable('window').subscribe((e: any) => {
			console.log('ScrollSpy::window: ', e);
		});
	}
}

@NgModule({
  imports: [
  	BrowserModule,
  	ScrollSpyModule.forRoot()
  ],
  declarations: [
  	AppComponent
  ], 
  bootstrap: [ AppComponent ]
})

Spy any element scroll

Use ScrollSpyElementDirective to spy on any element. You must give an unique id to each instance.

import { NgModule, Component, Injectable, AfterViewInit } from '@angular/core';
import { ScrollSpyModule, ScrollSpyService } from 'ngx-scrollspy';

@Injectable()
@Component({
	selector: 'yourComponent',
	template: `
	<div scrollSpyElement="test" style="max-height: 100px; overflow: auto;">
		<div style="height: 500px;"></div>
	</div>`
})
export class YourComponent implements AfterViewInit {

	constructor(private scrollSpyService: ScrollSpyService) {}

	ngAfterViewInit() {
		this.scrollSpyService.getObservable('test').subscribe((e: any) => {
			console.log('ScrollSpy::test: ', e);
		});
	}
}

@NgModule({
  imports: [
		ScrollSpyModule
  ],
  declarations: [
  	AppComponent
  ], 
  providers: [ ] 
})
export class YourModule { }

Because ScrollSpyService is a singleton, you can get any ScrollSpy observable from anywhere withing your application.

TODO:

  • Documentation/examples webpage
  • Finish unit tests

License

MIT

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].