{"id":13580885,"url":"https://github.com/TradeMe/ng-defer-load","last_synced_at":"2025-04-06T06:32:09.781Z","repository":{"id":32220809,"uuid":"125449271","full_name":"TradeMe/ng-defer-load","owner":"TradeMe","description":null,"archived":false,"fork":false,"pushed_at":"2024-01-16T22:22:45.000Z","size":413,"stargazers_count":128,"open_issues_count":14,"forks_count":37,"subscribers_count":13,"default_branch":"master","last_synced_at":"2024-04-13T22:55:49.952Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/TradeMe.png","metadata":{"files":{"readme":"README.md","changelog":null,"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}},"created_at":"2018-03-16T01:53:29.000Z","updated_at":"2023-11-16T15:58:04.000Z","dependencies_parsed_at":"2023-01-14T20:46:52.823Z","dependency_job_id":"2c9c334f-5649-4ffe-ab2f-efb976f94383","html_url":"https://github.com/TradeMe/ng-defer-load","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TradeMe%2Fng-defer-load","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TradeMe%2Fng-defer-load/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TradeMe%2Fng-defer-load/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TradeMe%2Fng-defer-load/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TradeMe","download_url":"https://codeload.github.com/TradeMe/ng-defer-load/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247332612,"owners_count":20921853,"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":[],"created_at":"2024-08-01T15:01:55.967Z","updated_at":"2025-04-06T06:32:09.759Z","avatar_url":"https://github.com/TradeMe.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# ng-defer-load\n*ng-defer-load* is an Angular directive to load elements lazily. \n\nIt uses [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) to check if an element is in viewport and falls back to scroll detection mechanism for unsupported browsers.\n\n## Installation\n\nUsing npm:\n```shell\n$ npm i @trademe/ng-defer-load\n```\n## Usage\n\n1. Import `DeferLoadModule` into the module corresponding to your component\n\n2. Use the directive with the element you wish to lazy load\n```html\n  \u003cdiv\n    (deferLoad)=\"showMyElement=true\"\u003e\n    \u003cmy-element\n       *ngIf=showMyElement\u003e\n      ...\n    \u003c/my-element\u003e\n\u003c/div\u003e\n```\n*Note:* You might want to have a loading state for your element with approximately same height as the element.\n\n## Server Side Rendering\n\n`ng-defer-load` supports Server Side Rendering from version 1.1.0\n\nIt loads the element on the server by default supporting Search Engine Optimization. If you do not want to pre-render the element in server, you can set `preRender` to false on the element as below:\n\n```html\n  \u003cdiv\n    [preRender]=\"false\"\n    (deferLoad)=\"showMyElement=true\"\u003e\n    \u003cmy-element\n       *ngIf=showMyElement\u003e\n      ...\n    \u003c/my-element\u003e\n\u003c/div\u003e\n```\n\n## Fall back support\n\n`ng-defer-load` supports a fall back in browsers or devices (like older iPhones) that do not support the IntersectionObserver API. This uses the scroll position and the element's offset. This is enabled by default.\n\nIf you do not want to allow this fallback, and would prefer the browser to just render the element regardless, you can set `fallbackEnabled` to false on the element as below:\n\n```html\n  \u003cdiv\n    [fallbackEnabled]=\"false\"\n    (deferLoad)=\"showMyElement=true\"\u003e\n    \u003cmy-element\n       *ngIf=showMyElement\u003e\n      ...\n    \u003c/my-element\u003e\n\u003c/div\u003e\n```\n\n## Demo\n\nDemo of *ng-defer-load* in use is available [here](https://stackblitz.com/edit/ng-defer-load).\n\n## License\n\nReleased under the [MIT license](https://github.com/TradeMe/ng-defer-load/blob/master/README.md).\n\n## Release notes\n\nv1.0.1 - Initial version\n\nv1.1.0 - Supports Universal - Server Side Rendering\n\nv2.0.0 - Supports Angular 6\n\nv3.0.0 - Supports Angular 7\n\nv3.1.0 - Made it possible to switch off scroll fallback\n\nv8.0.0 - Supports Angular 8/9\n\nv8.1.0 - Supports more package formats (using ng-packagr)\n\nv8.2.0 - Added option to remove listeners after load\n\nv8.2.1 - Fix for IE11 and older browsers\n\nv8.2.2 - Updated dependencies due to security advisories\n\nv14.0.0 - Supports Angular 12+ (targeting Angular 14) with partial Ivy builds. Additionally, drops support for IE11.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTradeMe%2Fng-defer-load","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FTradeMe%2Fng-defer-load","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTradeMe%2Fng-defer-load/lists"}