{"id":17429801,"url":"https://github.com/ajaysinghj8/angular-inport","last_synced_at":"2025-04-15T22:30:39.348Z","repository":{"id":18707047,"uuid":"84857376","full_name":"ajaysinghj8/angular-inport","owner":"ajaysinghj8","description":"Angular In View Port Detector","archived":false,"fork":false,"pushed_at":"2023-01-07T02:18:09.000Z","size":2321,"stargazers_count":33,"open_issues_count":25,"forks_count":18,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-12-23T09:16:45.516Z","etag":null,"topics":["angular","angular2","angular4","inport","inviewport","viewport"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ajaysinghj8.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-13T17:49:55.000Z","updated_at":"2024-08-28T06:47:28.000Z","dependencies_parsed_at":"2023-01-13T19:58:11.639Z","dependency_job_id":null,"html_url":"https://github.com/ajaysinghj8/angular-inport","commit_stats":null,"previous_names":["coderajay/angular-inport","coderajay/ng2-inview"],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajaysinghj8%2Fangular-inport","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajaysinghj8%2Fangular-inport/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajaysinghj8%2Fangular-inport/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajaysinghj8%2Fangular-inport/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ajaysinghj8","download_url":"https://codeload.github.com/ajaysinghj8/angular-inport/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249160496,"owners_count":21222458,"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","angular2","angular4","inport","inviewport","viewport"],"created_at":"2024-10-17T07:09:40.958Z","updated_at":"2025-04-15T22:30:39.044Z","avatar_url":"https://github.com/ajaysinghj8.png","language":"TypeScript","readme":"# Angular In Port / Angular In View Port\n\n## Installation\n\n- `npm i -S angular-inport`\n\n- `yarn add angular-inport`\n\n## Importing module \n \n```js\nimport { NgInviewModule } from 'angular-inport'; \n\n@NgModule({                                   \n    imports: [\n        // ...\n        NgInviewModule                       \n    ],\n    declarations: [YourAppComponent],\n    exports: [YourAppComponent],\n    bootstrap: [YourAppComponent],\n})\n```\n\n#### Basic Usages\n\n```html\n\u003cdiv in-view (inview)=\"inview($event)\"\u003e\u003c/div\u003e\n```\n\n#### Advanced Usages\n\n```html\n\n\u003cdiv in-view\n          (inview)=\"inview($event)\"\n          [offset]=\"[top, right, bottom, left]\" or \"[top/bottom, left/right]\" or \"[top/bottom/left/right]\"\n          [viewPortOffset]=\"[top, right, bottom, left]\" or \"[top/bottom, left/right]\" or \"[top/bottom/left/right]\"\n          [throttle]=\"[Number in ms to limit the inview event]\"\n          [scrollELement]=\"parent element reference on which scrolling applied\" \n          [trigger]=\"An Observable ex. BehaviorSubject\"\n          \u003e\n          .......\n\u003c/div\u003e\n\n```\n\n## InviewContainer and InviewItem Directive\n\n#### Basic Usages\n\n```html\n\n\u003cdiv in-view-container (inview)=\"inview($event)\"\u003e\n   \u003cdiv in-view-item *ngFor=\"let item of items; let i = index;\" [id]=\"index\" [data]=\"item\"\u003e\n     .......\n   \u003c/div\u003e\n\u003c/div\u003e\n\n```\n\n\n#### Advanced Usages\n\n```html\n\n\u003cdiv in-view-container \n                    (inview)=\"inview($event)\"\n                    [offset]=\"[top, right, bottom, left]\" or \"[top/bottom, left/right]\" or \"[top/bottom/left/right]\"\n                    [viewPortOffset]=\"[top, right, bottom, left]\" or \"[top/bottom, left/right]\" or \"[top/bottom/left/right]\"\n                    [throttle]=\"[Number in ms to limit the inview event]\"\n                    [bestMatch]=\"when true, inview will return only one element closet to viewport center\"\n                    [trigger]=\"An Observable ex. BehaviorSubject\"\n                    \u003e\n   \u003cdiv in-view-item *ngFor=\"let item of items; let i = index;\" [id]=\"index\" [data]=\"item\"\u003e\n     .......\n   \u003c/div\u003e\n\u003c/div\u003e\n\n```\n\n#### InView Props\n\n* `(inview)`: inview event, it will keep to emitting the event on scroll. \n* `[offset]`: offset value can be provided as [top, right, bottom, left] or [top/bottom, left/right] or [top/bottom/left/right]\n* `[viewPortOffset]` : offset value from an element or window port.\n* `[trigger]`: An Observable ex. BehaviorSubject can be passed to trigger (inview) event.\n* `[scrollELement]`: element to check if the content is available in view port with in the element 's view port. default value is window.\n* `[data]`: data property can be used to identify the in-view event source, when you have multiple in-view directives in a page attached to same in-view handler.\n\n* `[lazy]`: default  false, set true when you want in-view event to trigger only on visibility of that content. will not trigger when content goes out of view port.\n* `[tooLazy]`: default false, set true when you want in-view event to trigger only when visibility state changes.\n* `[triggerOnInit]`: default false, set true when you want in-view event to get triggered on element load otherwise it will trigger only on scroll event.\n\n#### InViewContainer Props\n* `(inview)`: inview event, it will keep to emitting the event on scroll. \n* `[offset]`: offset value can be provided as [top, right, bottom, left] or [top/bottom, left/right] or [top/bottom/left/right]\n* `[viewPortOffset]` : offset value from an element or window port.\n* `[scrollWindow]`: default true uses window scroll to check inview status, set false to check from container's scroll. \n* `[bestMatch]` : will return only the centered element from other element. Please check example.\n* `[triggerOnInit]`: default false, set true when you want in-view event to get triggered on element load otherwise it will trigger only on scroll event.\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fajaysinghj8%2Fangular-inport","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fajaysinghj8%2Fangular-inport","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fajaysinghj8%2Fangular-inport/lists"}