Angular templates are mission-critial for components. But how do they work? Using a compiler, yes, but how do they bind to the DOM itself? Read on to find out.

Playful Programming

Angular templates are commonly misunderstood. Rather than the compiler creating and injecting a host element, Angular actually injects the compiled template as children of an existing non-standard HTML element (the selector). The host element cannot be removed because it was never created by Angular — it's just a browser-tolerated custom element acting as a blank-slate container. A component is essentially a directive with a template injected into the selector's children. To avoid non-semantic host elements, you can use attribute-based selectors (e.g., `li[sayHi]`) to bind component behavior to native HTML elements instead.

Angular's Templates Don't Work the Way You Think They Do