{"id":23329038,"url":"https://github.com/jukkahyv/angular-custom-element","last_synced_at":"2026-05-19T10:33:43.760Z","repository":{"id":90771193,"uuid":"561770875","full_name":"jukkahyv/angular-custom-element","owner":"jukkahyv","description":"Angular custom element with unit tests","archived":false,"fork":false,"pushed_at":"2022-11-04T14:31:52.000Z","size":136,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-13T12:42:25.973Z","etag":null,"topics":["angular","web-components"],"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/jukkahyv.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2022-11-04T13:04:41.000Z","updated_at":"2022-11-04T14:27:24.000Z","dependencies_parsed_at":null,"dependency_job_id":"b392610d-f64f-4268-9a7f-23f5ca168433","html_url":"https://github.com/jukkahyv/angular-custom-element","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jukkahyv%2Fangular-custom-element","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jukkahyv%2Fangular-custom-element/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jukkahyv%2Fangular-custom-element/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jukkahyv%2Fangular-custom-element/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jukkahyv","download_url":"https://codeload.github.com/jukkahyv/angular-custom-element/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247623009,"owners_count":20968574,"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","web-components"],"created_at":"2024-12-20T21:30:36.489Z","updated_at":"2026-05-19T10:33:43.727Z","avatar_url":"https://github.com/jukkahyv.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular custom element (Web Component) with unit tests\n\nI was struggling to get [Angular custom elements](https://angular.io/guide/elements) working in unit tests. For some reason, Angular team didn't include any tests (that I can see) in their tutorial. Here is minimal (?) application that works.\n\n## Why would you do this?\n\nSometimes it's necessary to render HTML (as string or elements) outside of Angular, while still using some sort of templating. For example, in my case, popups. If the rest of the application is already using Angular, it makes sense to use Angular for this, too. Alternatively, you could use lightweight template processing such as [handlebars](https://handlebarsjs.com/).\n\n## Explanation of solution\n\nAll the relevant code is in `my-custom-element.component.spec.ts`:\n\nThis registers the custom component. Note that checking previous registration is needed, otherwise running multiple tests fails.\n```typescript\n    const injector = TestBed.inject(Injector);\n    const MyCustomElement = createCustomElement(MyCustomElementComponent, {injector});\n    if (!customElements.get('my-custom-element')) customElements.define('my-custom-element', MyCustomElement);\n```\n\nFirst I tried creating element with `document.createElement` and checking content. It does not work.\n\n```typescript\n    const customElem = document.createElement('my-custom-element');\n    expect(customElem.innerHTML).not.toBe('');\n    expect(customElem.innerText).toBe('my-custom-element works!');\n```\n\nWhat was needed, we need to have a wrapper \"host\" Angular element, even if we're rendering the component using `document.createElement`.\n```typescript\n    const fixture = TestBed.createComponent(MyCustomElementHostComponent);\n    const component = fixture.componentInstance;\n    fixture.detectChanges();\n\n    const customElem = document.createElement('my-custom-element');\n\n    // THIS MAKES IT WORK\n    component.element.nativeElement.appendChild(customElem);\n    fixture.detectChanges();\n\n    expect(customElem.innerHTML).not.toBe('');\n    expect(customElem.innerText).toBe('my-custom-element works!');\n```\n\nThis solution is still not ideal, because it requires creating that \"dummy\" Angular component.\n\nDisclaimer: I'm very novice with Angular (more of a React guy). I couldn't find any examples with unit tests. Hopefully this helps someone!\n\n## Running unit tests\n\nRun `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjukkahyv%2Fangular-custom-element","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjukkahyv%2Fangular-custom-element","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjukkahyv%2Fangular-custom-element/lists"}