{"id":19320953,"url":"https://github.com/hamedstack/hamedstack.angular.nohost.snippet","last_synced_at":"2025-08-19T20:16:23.661Z","repository":{"id":197972727,"uuid":"696002393","full_name":"HamedStack/HamedStack.Angular.NoHost.Snippet","owner":"HamedStack","description":"A VS Code snippet as a shortcut for rapidly generating code to create a no-host (container-less) component in Angular.","archived":false,"fork":false,"pushed_at":"2023-10-03T09:07:36.000Z","size":11,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-24T05:28:38.419Z","etag":null,"topics":["angular","component","container-less","containerless","fragment","javascript","no-host","snippet","standalone","standalone-component","standalone-components","typescript","visual-studio-code","vscode","vscode-snippets"],"latest_commit_sha":null,"homepage":"","language":null,"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/HamedStack.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2023-09-24T21:09:39.000Z","updated_at":"2024-08-25T20:14:36.000Z","dependencies_parsed_at":null,"dependency_job_id":"e92000a4-811f-4dbf-9da6-12b0aa510a2f","html_url":"https://github.com/HamedStack/HamedStack.Angular.NoHost.Snippet","commit_stats":null,"previous_names":["hamedstack/hamedstack.angular.nohost.snippet"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/HamedStack/HamedStack.Angular.NoHost.Snippet","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HamedStack%2FHamedStack.Angular.NoHost.Snippet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HamedStack%2FHamedStack.Angular.NoHost.Snippet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HamedStack%2FHamedStack.Angular.NoHost.Snippet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HamedStack%2FHamedStack.Angular.NoHost.Snippet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HamedStack","download_url":"https://codeload.github.com/HamedStack/HamedStack.Angular.NoHost.Snippet/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HamedStack%2FHamedStack.Angular.NoHost.Snippet/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271215037,"owners_count":24720098,"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-19T02:00:09.176Z","response_time":63,"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":["angular","component","container-less","containerless","fragment","javascript","no-host","snippet","standalone","standalone-component","standalone-components","typescript","visual-studio-code","vscode","vscode-snippets"],"created_at":"2024-11-10T01:34:08.703Z","updated_at":"2025-08-19T20:16:23.492Z","avatar_url":"https://github.com/HamedStack.png","language":null,"readme":"![ngx](https://user-images.githubusercontent.com/8418700/143725233-c5b3320c-30ab-4077-9939-9b37dd6be5db.png)\n\n## Problem\n\nAngular does not support [optional host-element](https://github.com/angular/angular/issues/18877) officially so we should stick to annoying `div` which sometimes destroys our component design especially for 3rd party CSS frameworks like `Bootstrap`.\n\n## Solution\n\nThere is a trick to achieve a `no-host` component:\n\n```typescript\nimport {\n  AfterViewInit,\n  Component,\n  ElementRef,\n  OnInit,\n  TemplateRef,\n  ViewChild,\n  ViewContainerRef\n} from '@angular/core';\n\n@Component({\n  standalone: true, // or false\n  selector: 'my-nohost-component',\n  // Keep the same structure is necessary. \n  // Put any component's detail inside 'ng-template'.\n  // You can use 'templateUrl' too but with the same structure.\n  template: '\u003cng-template #nohost\u003eHERE!\u003c/ng-template\u003e',\n})\nexport class MyNoHostComponent implements OnInit, AfterViewInit {\n  constructor(\n    private readonly element: ElementRef,\n    private readonly viewContainer: ViewContainerRef\n  ) {}\n  \n  @ViewChild('nohost', { static: true }) noHostRef: TemplateRef\u003c{}\u003e | undefined;\n\n  ngOnInit(): void {\n    if (this.noHostRef)\n        this.viewContainer.createEmbeddedView(this.noHostRef);\n  }\n  ngAfterViewInit(): void {\n    this.element.nativeElement.remove();\n    /* Another way\n      document\n        .querySelectorAll(this.elem.nativeElement.tagName.toLowerCase())\n        .forEach((el) =\u003e el.parentNode.removeChild(el));\n    */\n  }\n}\n```\n\n![Screenshot](https://user-images.githubusercontent.com/8418700/143724048-93872d5e-b634-4687-9bcd-8edfc610abbc.png)\n\n### Usage\n\nThis snippet code `ngx-nohost` helps you write your `no-host` components faster. [Install from here](https://marketplace.visualstudio.com/items?itemName=hamedfathi.angular-nohost). \n\n![ngx-nohost](https://user-images.githubusercontent.com/8418700/182196135-6ac0cdbd-f2d9-4657-bc1b-ee2427a92826.gif)\n\n\n\n\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhamedstack%2Fhamedstack.angular.nohost.snippet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhamedstack%2Fhamedstack.angular.nohost.snippet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhamedstack%2Fhamedstack.angular.nohost.snippet/lists"}