--- title: Angular's Templates Don't Work the Way You Think They Do description: Angular templates are commonly misunderstood. Rather than the compiler creating and injecting a host element, Angular actually injects the compiled template as... canonical: https://daily.dev/posts/angular-s-templates-don-t-work-the-way-you-think-they-do-c3amyxpry twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Angular's Templates Don't Work the Way You Think They Do | daily.dev og:description: Angular templates are commonly misunderstood. Rather than the compiler creating and injecting a host element, Angular actually injects the compiled template as... og:url: https://daily.dev/posts/angular-s-templates-don-t-work-the-way-you-think-they-do-c3amyxpry og:image: https://api.daily.dev/og/posts/C3AMYXPrY.png og:image:alt: Angular's Templates Don't Work the Way You Think They Do og:image:width: 1200 og:image:height: 630 og:locale: en --- [Playful Programming](https://daily.dev/sources/playfulprogramming) [Read post](https://api.daily.dev/r/C3AMYXPrY) # [Angular's Templates Don't Work the Way You Think They Do](https://api.daily.dev/r/C3AMYXPrY "Go to post") This title could be clearer and more informative. Try out Clickbait Shield for free (5 uses left this month). 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. [#webdev](/tags/webdev "Check all #webdev posts")[#javascript](/tags/javascript "Check all #javascript posts")[#angular](/tags/angular "Check all #angular posts") Mar 16 • 3m read time • From [playfulprogramming.com](https://api.daily.dev/r/C3AMYXPrY "playfulprogramming.com") [](https://api.daily.dev/r/C3AMYXPrY "Go to post") Table of contents [Post contents](https://api.daily.dev/r/C3AMYXPrY?a=blog-post-contents "Post contents")[ Consider supporting](https://api.daily.dev/r/C3AMYXPrY "Consider supporting") Comment Bookmark Copy Share your thoughts Post Share this post [](https://daily.dev/sources/playfulprogramming) [Playful Programming](https://daily.dev/sources/playfulprogramming "https://daily.dev/sources/playfulprogramming") 7 Followers • 34 Upvotes [](https://daily.dev/crutchcorn) [Corbin Crutchley](https://daily.dev/crutchcorn) [@crutchcorn](https://daily.dev/crutchcorn) Joined Apr 13\. 2021 400 #### Would you recommend this post? Copy link Slack WhatsApp Facebook X New Squad Copy linkShare with your friends ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Angular's Templates Don't Work the Way You Think They Do","url":"https://daily.dev/posts/angular-s-templates-don-t-work-the-way-you-think-they-do-c3amyxpry","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/angular-s-templates-don-t-work-the-way-you-think-they-do-c3amyxpry"},"datePublished":"2026-03-16T21:46:49.859Z","dateModified":"2026-03-17T18:02:55.476Z","description":"Angular templates are commonly misunderstood. Rather than the compiler creating and injecting a host element, Angular actually injects the compiled template as...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/9542b19410b943cb2cf9a2d54d47a58e?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/9542b19410b943cb2cf9a2d54d47a58e?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Playful Programming","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Person","name":"Corbin Crutchley","url":"https://daily.dev/crutchcorn","image":"https://avatars.githubusercontent.com/u/9100169?v=4","interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"EndorseAction"},"userInteractionCount":400}},"commentCount":0,"discussionUrl":"https://daily.dev/posts/angular-s-templates-don-t-work-the-way-you-think-they-do-c3amyxpry","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"webdev,javascript,angular","timeRequired":"PT3M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Playful Programming","item":"https://daily.dev/sources/playfulprogramming"},{"@type":"ListItem","position":3,"name":"Angular's Templates Don't Work the Way You Think They Do"}]} ```