LukeParke/unicorn-utterances
1
0
Fork 0
mirror of https://github.com/LukeHagar/unicorn-utterances.git synced 2025-12-09 12:57:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: remove section to become its own article

Browse Source
This commit is contained in:
Corbin Crutchley
2023-12-27 01:26:15 -07:00
parent 182f6fbc8d
commit 0ee59ad9d7
1 changed files with 0 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
content/blog/angular-dynamic-host-usage/index.md
View File

@@ -228,71 +228,3 @@ export class App {}
```` ````
# Dynamic component `host` property binding
But what if I told you that these `host` properties were not unique to a directive? See, when I asked you at the start of the article to think of directives like components without templates I wasn't joking: **Angular components are directives with an additional template that is rendered as the `selector`'s children**.
```typescript
@Component({
selector: 'do-nothing',
standalone: true,
// Nothing in the template means nothing rendered as the `do-nothing` element
template: '',
})
class DoNothingComponent {}
@Component({
selector: 'app-root',
standalone: true,
imports: [DoNothingComponent],
template: `
<div>
<!-- This is not some magic by Angular, it is creating a "<do-nothing>" in the DOM -->
<do-nothing></do-nothing>
</div>
`,
})
export class App {}
```
This code sample will render:
````html
<div>
<do-nothing></do-nothing>
</div>
````
Because we added an empty template. This `do-nothing` element isn't special, either; the browser is built to allow non-registered elements and treat them akin to a `div` when they render.
Don't believe me? Try to render the above markup in HTML:
```html
<div>
<do-nothing>
<p>Hello, world!</p>
</do-nothing>
</div>
```
This will render the same markup as typed; no removal of `<do-nothing>` will occur and the `<p>` element will act as if it were inside of two `div`s.
That's all that's _really_ happening when we add a template to our existing `<do-nothing>` element:
```typescript
@Component({
selector: 'do-nothing',
standalone: true,
template: '<p>Hello, world!</p>',
})
class DoNothingComponent {}
```
While there _is_ a template compiler in Angular, it's only really there for [reactivity](/posts/what-is-reactivity). Otherwise, it injects the results of `template` in the `selector`'s (by default empty) children array.
This is why when people ask me:
> How to remove the host element created by an Angular component's `selector`?
The answer is: **it is not possible to remove the host element**. The host element is not being created by the `selector`, but rather is injecting the component's template as the children of a non-standard HTML element; who's default behavior is to be a blank slate.