unicorn-utterances/content/blog/angular-templates-dont-work-how-you-think/index.md

title, description, published, authors, tags, attached, license

title	description	published	authors	tags	attached	license
Angular's Templates Don't Work the Way You Think They Do		2023-12-27T13:45:00.284Z	crutchcorn	angular webdev javascript'		cc-by-nc-sa-4

When I started learning Angular, I was taught about Angular's components like this:

Angular's components have a template that is part of a component and a selector that indicates where the template should go. The way Angular adds this template in is by using a compiler to turn the template into a function that is then executed to generate the DOM nodes.

My thinking when learning about this went something like this:

This my old wrong internal model of how Angular templates worked:

A component compiles its template and assigns it to a selector. Whenever Angular sees that selector, it runs the template and injects an element with the selector to act as the parent.

But see that's not right. Let's take the following example of a do-nothing component:

@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:

<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:

<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 divs.

That's all that's really happening when we add a template to our existing <do-nothing> element:

@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. 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.