Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
ng2-scrollspy
Advanced tools
Readme
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:
First you need to install the npm module:
npm install ng2-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: {
"ng2-scrollspy": {"defaultExtension": "js"}
}
});
Finally, you can use ng2-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 'ng2-scrollspy';
@NgModule({
imports: [
BrowserModule,
ScrollSpyModule.forRoot()
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
Use ScrollSpyDirective
to spy on window.
import { NgModule, Component, Injectable, AfterViewInit } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ScrollSpyModule, ScrollSpyService } from 'ng2-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 ]
})
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 'ng2-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.
FAQs
Angular2 ScrollSpy Service
The npm package ng2-scrollspy receives a total of 39 weekly downloads. As such, ng2-scrollspy popularity was classified as not popular.
We found that ng2-scrollspy demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.