{"id":16532662,"url":"https://github.com/hamedfathi/angular-nohost-vscode-snippet","last_synced_at":"2026-05-05T16:03:25.200Z","repository":{"id":50971001,"uuid":"520171815","full_name":"HamedFathi/angular-nohost-vscode-snippet","owner":"HamedFathi","description":"A no-host component snippet code for Angular 2+ and Microsoft Visual Studio Code.","archived":false,"fork":false,"pushed_at":"2024-03-17T17:49:07.000Z","size":19,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-01-13T23:13:11.542Z","etag":null,"topics":["angular","angular2","snippet","snippets","vscode","vscode-extension","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/HamedFathi.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":"2022-08-01T15:50:02.000Z","updated_at":"2023-03-04T03:49:23.000Z","dependencies_parsed_at":"2024-10-11T18:13:13.545Z","dependency_job_id":"14ec8948-69cd-4162-9043-854ce31e17fc","html_url":"https://github.com/HamedFathi/angular-nohost-vscode-snippet","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/HamedFathi%2Fangular-nohost-vscode-snippet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HamedFathi%2Fangular-nohost-vscode-snippet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HamedFathi%2Fangular-nohost-vscode-snippet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HamedFathi%2Fangular-nohost-vscode-snippet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HamedFathi","download_url":"https://codeload.github.com/HamedFathi/angular-nohost-vscode-snippet/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241662449,"owners_count":19999137,"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","angular2","snippet","snippets","vscode","vscode-extension","vscode-snippets"],"created_at":"2024-10-11T18:13:09.635Z","updated_at":"2026-05-05T16:03:25.188Z","avatar_url":"https://github.com/HamedFathi.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhamedfathi%2Fangular-nohost-vscode-snippet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhamedfathi%2Fangular-nohost-vscode-snippet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhamedfathi%2Fangular-nohost-vscode-snippet/lists"}