https://github.com/allenhwkim/ngui-common
Angular 6 Virtual Scroll, Lazy Rendering, Virtual List, Autocomplete, etc
https://github.com/allenhwkim/ngui-common
angular lazy-rendering virtual-scroll
Last synced: 3 months ago
JSON representation
Angular 6 Virtual Scroll, Lazy Rendering, Virtual List, Autocomplete, etc
- Host: GitHub
- URL: https://github.com/allenhwkim/ngui-common
- Owner: allenhwkim
- License: mit
- Created: 2018-05-09T14:59:04.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-10-08T06:13:50.000Z (almost 2 years ago)
- Last Synced: 2025-04-01T22:19:15.639Z (3 months ago)
- Topics: angular, lazy-rendering, virtual-scroll
- Language: HTML
- Homepage:
- Size: 11.6 MB
- Stars: 17
- Watchers: 7
- Forks: 9
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# @ngui/common
Angular 12+ UI common directives, functions, services
[](https://travis-ci.org/allenhwkim/ngui-common)
[](https://www.npmjs.com/package/@ngui/common)
[](https://www.npmjs.com/package/@ngui/common)
[](https://www.npmjs.com/package/@ngui/common)
[Demo](https://rawgit.com/allenhwkim/ngui-common/master/dist/ngui-common-app/index.html)
[Object Documentation](https://rawgit.com/allenhwkim/ngui-common/master/documentation/index.html)
[Code Coverage Report](https://rawgit.com/allenhwkim/ngui-common/master/coverage/index.html)
[Unit Test Report](https://rawgit.com/allenhwkim/ngui-common/master/test-report.html)
[Acceptance Report](https://rawgit.com/allenhwkim/ngui-common/master/acceptance-report/mochawesome.html)
[Article on Medium](https://medium.com/allenhwkim/simple-lazy-loading-with-angular-716dd3b174a)
## Install
1. install @ngui/common
```
$ npm install @ngui/common --save
```
2. import NguiCommonModule to your AppModule
```
import { NguiInviewModule, NguiListModule, NguiUtilsModule } from '@ngui/common';
@NgModule({
imports: [BrowserModule, FormsModule, NguiListModule, NguiInviewModule, NguiUtilsModule],
declarations: [AppComponent],
providers: [HTTP_PROVIDERS],
bootstrap: [ AppComponent ]
})
export class AppModule { }
```
## Use it in your code
```
```
## Modules
### NguiInViewModule
Handles lazy rendering of Angular components, which utilizes HTML5 IntersectionObserver.
For IE11 and Safari, please add [polyfill](https://github.com/w3c/IntersectionObserver/tree/master/polyfill) for this module:
``
- ngui-inview component
- ngui-inview directive
### NguiUtilsModules
Collection of basic utility functions
- DynamicComponentService
- nguiHilight pipe
- fireEvent function
### NguiListModule
Handles list elements with highlight and keyboard/mouse interaction
- ngui-inview-page component
- ngui-list component
- ngui-virtual-list component
- ngui-autocomplete component