{"id":18355633,"url":"https://github.com/allenhwkim/ngui-common","last_synced_at":"2025-09-03T17:43:18.377Z","repository":{"id":42902737,"uuid":"132773166","full_name":"allenhwkim/ngui-common","owner":"allenhwkim","description":"Angular 6 Virtual Scroll, Lazy Rendering, Virtual List, Autocomplete, etc","archived":false,"fork":false,"pushed_at":"2023-10-08T06:13:50.000Z","size":12195,"stargazers_count":17,"open_issues_count":2,"forks_count":9,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-01T22:19:15.639Z","etag":null,"topics":["angular","lazy-rendering","virtual-scroll"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/allenhwkim.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-05-09T14:59:04.000Z","updated_at":"2022-03-01T17:27:42.000Z","dependencies_parsed_at":"2024-06-19T06:15:50.589Z","dependency_job_id":null,"html_url":"https://github.com/allenhwkim/ngui-common","commit_stats":{"total_commits":161,"total_committers":5,"mean_commits":32.2,"dds":0.4782608695652174,"last_synced_commit":"47436ce9c0448b0a18204d062b3f3283513aa9e7"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/allenhwkim%2Fngui-common","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/allenhwkim%2Fngui-common/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/allenhwkim%2Fngui-common/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/allenhwkim%2Fngui-common/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/allenhwkim","download_url":"https://codeload.github.com/allenhwkim/ngui-common/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247484397,"owners_count":20946384,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","lazy-rendering","virtual-scroll"],"created_at":"2024-11-05T22:07:34.215Z","updated_at":"2025-04-06T12:32:04.599Z","avatar_url":"https://github.com/allenhwkim.png","language":"HTML","readme":"# @ngui/common\n\nAngular 12+ UI common directives, functions, services\n\n[![Build Status](https://travis-ci.org/allenhwkim/ngui-common.svg?branch=master)](https://travis-ci.org/allenhwkim/ngui-common)\n[![npm](https://img.shields.io/npm/dt/@ngui/common.svg)](https://www.npmjs.com/package/@ngui/common) \n[![npm](https://img.shields.io/npm/v/@ngui/common.svg)](https://www.npmjs.com/package/@ngui/common)\n[![npm](https://img.shields.io/npm/l/@ngui/common.svg)](https://www.npmjs.com/package/@ngui/common)\n \n[Demo](https://rawgit.com/allenhwkim/ngui-common/master/dist/ngui-common-app/index.html)  \n[Object Documentation](https://rawgit.com/allenhwkim/ngui-common/master/documentation/index.html)  \n[Code Coverage Report](https://rawgit.com/allenhwkim/ngui-common/master/coverage/index.html)  \n[Unit Test Report](https://rawgit.com/allenhwkim/ngui-common/master/test-report.html)  \n[Acceptance Report](https://rawgit.com/allenhwkim/ngui-common/master/acceptance-report/mochawesome.html)  \n[Article on Medium](https://medium.com/allenhwkim/simple-lazy-loading-with-angular-716dd3b174a)  \n\n## Install\n\n1. install @ngui/common\n\n```\n$ npm install @ngui/common --save\n```\n\n2. import NguiCommonModule to your AppModule  \n\n```\nimport { NguiInviewModule, NguiListModule, NguiUtilsModule } from '@ngui/common';\n\n@NgModule({\n  imports: [BrowserModule, FormsModule, NguiListModule, NguiInviewModule, NguiUtilsModule],\n  declarations: [AppComponent],\n  providers: [HTTP_PROVIDERS],\n  bootstrap: [ AppComponent ]\n})\nexport class AppModule { }\n```\n\n## Use it in your code  \n\n```\n\u003c!-- the image is only displayed when \"ngui-inview\" is in viewport --\u003e\n\u003cngui-inview style=\"min-height: 300px\"\u003e\n  \u003cimg *ngIf src=\"https://picsum.photos/800/300\" height=\"33%\"\u003e\n\u003c/ngui-inview\u003e\n```\n\n## Modules\n\n### NguiInViewModule \nHandles lazy rendering of Angular components, which utilizes HTML5 IntersectionObserver.\n\nFor IE11 and Safari, please add [polyfill](https://github.com/w3c/IntersectionObserver/tree/master/polyfill) for this module:  \n`\u003cscript src=\"https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver\"\u003e\u003c/script\u003e`\n- ngui-inview component\n- ngui-inview directive\n\n### NguiUtilsModules\nCollection of basic utility functions\n- DynamicComponentService\n- nguiHilight pipe\n- fireEvent function\n\n### NguiListModule\nHandles list elements with highlight and keyboard/mouse interaction\n- ngui-inview-page component\n- ngui-list component\n- ngui-virtual-list component\n- ngui-autocomplete component\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fallenhwkim%2Fngui-common","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fallenhwkim%2Fngui-common","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fallenhwkim%2Fngui-common/lists"}