@ngui/common
Angular 12+ UI common directives, functions, services
Demo
Object Documentation
Code Coverage Report
Unit Test Report
Acceptance Report
Article on Medium
Install
- install @ngui/common
$ npm install @ngui/common --save
- 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
<!-- the image is only displayed when "ngui-inview" is in viewport -->
<ngui-inview style="min-height: 300px">
<img *ngIf src="https://picsum.photos/800/300" height="33%">
</ngui-inview>
Modules
NguiInViewModule
Handles lazy rendering of Angular components, which utilizes HTML5 IntersectionObserver.
For IE11 and Safari, please add polyfill for this module:
<script src="https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>
- 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