Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hamedstack/hamedstack.angular.nohost.snippet
A VS Code snippet as a shortcut for rapidly generating code to create a no-host (container-less) component in Angular.
https://github.com/hamedstack/hamedstack.angular.nohost.snippet
angular component container-less containerless fragment javascript no-host snippet standalone standalone-component standalone-components typescript visual-studio-code vscode vscode-snippets
Last synced: about 1 month ago
JSON representation
A VS Code snippet as a shortcut for rapidly generating code to create a no-host (container-less) component in Angular.
- Host: GitHub
- URL: https://github.com/hamedstack/hamedstack.angular.nohost.snippet
- Owner: HamedStack
- License: mit
- Created: 2023-09-24T21:09:39.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-10-03T09:07:36.000Z (over 1 year ago)
- Last Synced: 2024-11-10T01:36:14.242Z (3 months ago)
- Topics: angular, component, container-less, containerless, fragment, javascript, no-host, snippet, standalone, standalone-component, standalone-components, typescript, visual-studio-code, vscode, vscode-snippets
- Homepage:
- Size: 10.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
## Problem
Angular 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`.
## Solution
There is a trick to achieve a `no-host` component:
```typescript
import {
AfterViewInit,
Component,
ElementRef,
OnInit,
TemplateRef,
ViewChild,
ViewContainerRef
} from '@angular/core';
@Component({
standalone: true, // or false
selector: 'my-nohost-component',
// Keep the same structure is necessary.
// Put any component's detail inside 'ng-template'.
// You can use 'templateUrl' too but with the same structure.
template: 'HERE!',
})
export class MyNoHostComponent implements OnInit, AfterViewInit {
constructor(
private readonly element: ElementRef,
private readonly viewContainer: ViewContainerRef
) {}
@ViewChild('nohost', { static: true }) noHostRef: TemplateRef<{}> | undefined;
ngOnInit(): void {
if (this.noHostRef)
this.viewContainer.createEmbeddedView(this.noHostRef);
}
ngAfterViewInit(): void {
this.element.nativeElement.remove();
/* Another way
document
.querySelectorAll(this.elem.nativeElement.tagName.toLowerCase())
.forEach((el) => el.parentNode.removeChild(el));
*/
}
}
```
### Usage
This snippet code `ngx-nohost` helps you write your `no-host` components faster. [Install from here](https://marketplace.visualstudio.com/items?itemName=hamedfathi.angular-nohost).
