Angular 6+ UI common directives, functions, services

Demo
Object Documentation
Code Coverage Report
Unit Test Report
Acceptance Report

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 { }

<ngui-inview> <!-- only displays when this is in viewport -->
  <img *ngIf src="https://picsum.photos/800/300" height="33%">
</ngui-inview>

Handles lazy loading 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

Collection of basic utility function

• DynamicComponentService
• nguiHilight pipe
• fireEvent function

Handles list elements with highlight and keyboard/mouse interaction

• ngui-inview-page component
• ngui-list component
• ngui-virtual-list component
• ngui-autocomplete component