{"id":23624563,"url":"https://github.com/zdigambar/dz-ngx-element","last_synced_at":"2025-08-31T00:31:11.841Z","repository":{"id":259046099,"uuid":"875602527","full_name":"zdigambar/dz-ngx-element","owner":"zdigambar","description":"NgxElement enables to lazy load Angular components in non-angular applications. The library will register a custom element to which you can pass an attribute to specify what component you want to load.","archived":false,"fork":false,"pushed_at":"2024-12-23T18:50:56.000Z","size":2167,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"Master","last_synced_at":"2025-08-09T00:44:46.773Z","etag":null,"topics":["aem","angular-elements","non-angular"],"latest_commit_sha":null,"homepage":"https://github.com/zdigambar/dz-ngx-element","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/zdigambar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2024-10-20T12:28:08.000Z","updated_at":"2025-07-24T14:37:47.000Z","dependencies_parsed_at":"2024-10-22T19:07:14.066Z","dependency_job_id":null,"html_url":"https://github.com/zdigambar/dz-ngx-element","commit_stats":null,"previous_names":["zdigambar/dz-ngx-element"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/zdigambar/dz-ngx-element","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zdigambar%2Fdz-ngx-element","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zdigambar%2Fdz-ngx-element/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zdigambar%2Fdz-ngx-element/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zdigambar%2Fdz-ngx-element/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zdigambar","download_url":"https://codeload.github.com/zdigambar/dz-ngx-element/tar.gz/refs/heads/Master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zdigambar%2Fdz-ngx-element/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272926171,"owners_count":25016423,"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","status":"online","status_checked_at":"2025-08-30T02:00:09.474Z","response_time":77,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["aem","angular-elements","non-angular"],"created_at":"2024-12-27T21:01:09.288Z","updated_at":"2025-08-31T00:31:11.824Z","avatar_url":"https://github.com/zdigambar.png","language":"TypeScript","funding_links":[],"categories":["Recently Updated","Table of contents"],"sub_categories":["[Dec 27, 2024](/content/2024/12/27/README.md)","Third Party Components"],"readme":"# Supported Version\n| ngx-element  | Angular  |\n| ------------ | -------  |\n| 1.x.x        | ^10.x.x  |\n| 2.x.x        | ^11.x.x  |\n| 3.x.x        | ^12.x.x  |\n| 4.x.x        | ^13.x.x  |\n| 5.x.x        | ^14.x.x  |\n| 6.x.x        | ^15.x.x  |\n| 7.x.x        | ^16.x.x  |\n| 8.x.x        | ^17.x.x  |\n| 9.x.x        | ^18.x.x  |\n\n\n# NgxElement\n\nNgxElement enables to lazy load Angular components in non-angular applications.\nThe library will register a custom element to which you can pass an attribute to specify what component you want to load.\n\nIt's a great way to use Angular in your CMS platform in an efficient manner.\n\n## Install Angular Elements\nThis library depends on Angular Elements. You can install it by running:\n```\n$ ng add @angular/elements\n```\n\n## Installing the library\n```\n$ npm install @zdigambar/ngx-element --save\n```\n\n## Usage\n### 1) Configure the Module containing the lazy loaded component\n\nFirst of all, expose the Angular Component that should be loaded via a customElementComponent property.\n\n```\n...\n@NgModule({\n  declarations: [TalkComponent],\n  ...\n  exports: [TalkComponent],\n  entryComponents: [TalkComponent]\n})\nexport class TalkModule {\n  customElementComponent: Type\u003cany\u003e = TalkComponent;\n  ...\n}\n```\n\n### 2) Define the lazy component map in your AppModule\nJust like with the Angular Router, define the map of component selector and lazy module.\n\n```\nconst lazyConfig = [\n  {\n    selector: 'talk',\n    loadChildren: () =\u003e import('./talk/talk.module').then(m =\u003e m.TalkModule)\n  }\n];\n\n@NgModule({\n  ...,\n  imports: [\n    ...,\n    NgxElementModule.forRoot(lazyConfig)\n  ],\n  ...\n})\nexport class AppModule {\n  ...\n  ngDoBootstrap() {}\n}\n```\n\n### 3) Use the lazy loaded component\nYou can load your Angular component by adding an `\u003cngx-element\u003e` tag to the DOM in your non-angular application like follows:\n\n```\n\u003cngx-element\n  selector=\"talk\"\n  data-title=\"Angular Elements\"\n  data-description=\"How to write Angular and get Web Components\"\n  data-speaker=\"Digambar\"\u003e\n\u003c/ngx-element\u003e\n```\n\n### 4) Listen to events\nYou can listen to events emitted by Angular components.\n\nAdd an `@Output` event to your component:\n\n```\n...\n@Output() tagClick: EventEmitter\u003cstring\u003e = new EventEmitter();\n...\n```\n\nThen add an event listener to the `tagClick` event on the appropiate `\u003cngx-element\u003e` element:\n\n```\nconst talks = document.querySelector('ngx-element[selector=\"talk\"]');\ntalks.addEventListener('tagClick', event =\u003e {\n  const emittedValue = event.detail;\n  ...\n});\n```\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzdigambar%2Fdz-ngx-element","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzdigambar%2Fdz-ngx-element","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzdigambar%2Fdz-ngx-element/lists"}