{"id":13808370,"url":"https://github.com/Angular-Dynamic-Hooks/ngx-dynamic-hooks","last_synced_at":"2025-05-14T02:31:42.878Z","repository":{"id":50232981,"uuid":"285645982","full_name":"Angular-Dynamic-Hooks/ngx-dynamic-hooks","owner":"Angular-Dynamic-Hooks","description":"Automatically insert live Angular components into dynamic strings (based on their selector or any pattern of your choice) and render the result in the DOM.","archived":false,"fork":false,"pushed_at":"2024-10-28T11:14:12.000Z","size":2725,"stargazers_count":117,"open_issues_count":2,"forks_count":6,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-11-18T05:19:06.394Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/Angular-Dynamic-Hooks.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":"2020-08-06T18:44:02.000Z","updated_at":"2024-11-14T15:10:41.000Z","dependencies_parsed_at":"2024-04-15T23:42:26.089Z","dependency_job_id":"f64b84fe-0fd1-480f-bba9-b670e9e11f17","html_url":"https://github.com/Angular-Dynamic-Hooks/ngx-dynamic-hooks","commit_stats":{"total_commits":49,"total_committers":2,"mean_commits":24.5,"dds":"0.10204081632653061","last_synced_commit":"ee5c157f086ae5c4fbdae26097a6d55c924b400c"},"previous_names":["angular-dynamic-hooks/ngx-dynamic-hooks","mtobisch/ngx-dynamic-hooks"],"tags_count":27,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Angular-Dynamic-Hooks%2Fngx-dynamic-hooks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Angular-Dynamic-Hooks%2Fngx-dynamic-hooks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Angular-Dynamic-Hooks%2Fngx-dynamic-hooks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Angular-Dynamic-Hooks%2Fngx-dynamic-hooks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Angular-Dynamic-Hooks","download_url":"https://codeload.github.com/Angular-Dynamic-Hooks/ngx-dynamic-hooks/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225273235,"owners_count":17448073,"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-04T01:01:41.239Z","updated_at":"2024-11-19T00:30:43.051Z","avatar_url":"https://github.com/Angular-Dynamic-Hooks.png","language":"TypeScript","funding_links":["https://www.paypal.com/donate/?hosted_button_id=3XVSEZKNQW8HC"],"categories":["Table of contents"],"sub_categories":["Third Party Components"],"readme":"\u003cimg align=\"left\" width=\"45\" height=\"90\" src=\"https://github.com/angular-dynamic-hooks/ngx-dynamic-hooks/assets/12670925/5322c5e3-121b-4a43-906d-6a440b909919\" alt=\"The logo for the Angular Dynamic Hooks library\"\u003e\n\n# Angular Dynamic Hooks\n\n[![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/angular-dynamic-hooks/ngx-dynamic-hooks/ci-test.yml?style=flat-square\u0026logo=github\u0026label=CI%20tests)](https://github.com/angular-dynamic-hooks/ngx-dynamic-hooks/actions/workflows/ci-test.yml)\n[![Coverage](https://img.shields.io/codecov/c/gh/angular-dynamic-hooks/ngx-dynamic-hooks?style=flat-square)](https://codecov.io/gh/angular-dynamic-hooks/ngx-dynamic-hooks)\n[![NPM](https://img.shields.io/npm/v/ngx-dynamic-hooks?color=orange\u0026style=flat-square)](https://www.npmjs.com/package/ngx-dynamic-hooks)\n[![License](https://img.shields.io/github/license/angular-dynamic-hooks/ngx-dynamic-hooks?color=blue\u0026style=flat-square)](https://github.com/angular-dynamic-hooks/ngx-dynamic-hooks/blob/master/LICENSE.md)\n[![Static Badge](https://img.shields.io/badge/Donate%20-%20Thank%20you!%20-%20%23ff8282?style=flat-square)](https://www.paypal.com/donate/?hosted_button_id=3XVSEZKNQW8HC)\n\nAngular Dynamic Hooks allows you to load Angular components into dynamic content, such as HTML strings (similar to a \"dynamic\" template) or even already-existing HTML structures. \n\nWorks as part of an Angular app or fully standalone. Load components by selectors or **any text pattern**. No JiT-compiler required - [just install and go](https://angular-dynamic-hooks.com/guide/quickstart).\n\n![A short animated gif showing how to use the Angular Dynamic Hooks library to load components](https://github.com/angular-dynamic-hooks/ngx-dynamic-hooks/assets/12670925/ef27d405-4663-48a5-97b5-ca068d7b67d8)\n\n# Installation\n\nSimply install via npm (or yarn)\n\n```sh\nnpm install ngx-dynamic-hooks\n```\n\n# Compatibility\n\n| Angular | Version | NPM |\n| --- | --- | --- |\n| 6 - 12  | 1.x.x | `ngx-dynamic-hooks@^1` |\n| 13-16  | 2.x.x | `ngx-dynamic-hooks@^2` |\n| 17+  | 3.x.x | `ngx-dynamic-hooks@^3` |\n\nAs the library does not rely on a runtime compiler, it works in both JiT- and AoT-environments.\n\n**Upgrading to v3**: If you have been using v2 of the library and are looking to upgrade, have a look at [Version 3 - What's new?](https://angular-dynamic-hooks.com/guide/version-3-whats-new) for a list of breaking changes.\n\n# Quickstart\n\nImport the `DynamicHooksComponent` as well as your dynamic component(s) to load:\n\n```ts\nimport { Component } from '@angular/core';\nimport { DynamicHooksComponent } from 'ngx-dynamic-hooks';\nimport { ExampleComponent } from 'somewhere';\n\n@Component({\n  ...\n  imports: [DynamicHooksComponent]\n})\nexport class AppComponent {\n  // The content to parse\n  content = 'Load a component here: \u003capp-example\u003e\u003c/app-example\u003e';\n  // A list of components to look for\n  parsers = [ExampleComponent];\n}\n```\nThen just use `\u003cngx-dynamic-hooks\u003e` where you want to render the content:\n\n```html\n\u003cngx-dynamic-hooks [content]=\"content\" [parsers]=\"components\"\u003e\u003c/ngx-dynamic-hooks\u003e\n```\n\nThat's it! If `\u003capp-example\u003e` is the selector of `ExampleComponent`, it will automatically be loaded in its place, just like in a normal template.\n\n# Documentation\n\nPlease note that the above is a very minimal example and that there are plenty more features and options available to you. [Check out the docs](https://angular-dynamic-hooks.com/guide/) to find out how to tailor the library to your exact needs. Highlights include:\n\n* ⭐ Loads fully-functional Angular components into dynamic content\n* 📖 Parses both strings and HTML trees to load components into them like a template\n* 🚀 Can be used fully standalone (load components into HTML without Angular)\n* 🏃 Works **without** needing the JiT compiler\n* 💻 Works **with** Server-Side-Rendering\n* 🔍 Loads components by their selectors, custom selectors or **any text pattern of your choice**\n* ⚙️ Services, Inputs/Outputs, Lifecycle Methods and other standard features all work normally\n* 💤 Allows lazy-loading components only if they appear in the content\n* 🔒 Can pass custom data safely to your components via an optional context object\n\n# Donate\n\nIf you like the the library and would like to support the ongoing development, maintenance and free technical support, you can [consider making a small donation](https://www.paypal.com/donate/?hosted_button_id=3XVSEZKNQW8HC). Your help is greatly appreciated - Thank you!\n\n# Issues\n\nPlease post bugs or any bigger or smaller questions you might have in the issues tab and I will have a look at them as soon as possible.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAngular-Dynamic-Hooks%2Fngx-dynamic-hooks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FAngular-Dynamic-Hooks%2Fngx-dynamic-hooks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAngular-Dynamic-Hooks%2Fngx-dynamic-hooks/lists"}