---
title: "Web Components in Angular - Why Passing Inputs Breaks on Navigation"
url: https://daily.dev/posts/web-components-in-angular---why-passing-inputs-breaks-on-navigation-z7pvybo93
source_url: https://dev.to/this-is-angular/web-components-in-angular-why-passing-inputs-breaks-on-navigation-52b6
type: article
source: "This is Angular"
published: 2025-12-21T16:12:31.109Z
updated: 2025-12-21T16:12:54.136Z
tags: ["webdev", "angular", "dom", "web-components"]
reading_time: 6
upvotes: 1
comments: 0
language: en
---

> ## Documentation Index
> Fetch the complete documentation index at: https://daily.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Web Components in Angular - Why Passing Inputs Breaks on Navigation

**[This is Angular](https://daily.dev/sources/tia)** · 6 min read · 1 upvotes · 0 comments

## Summary

Web Components integrated into Angular apps can fail on navigation due to lifecycle timing mismatches. When Angular destroys and recreates a component, the browser initializes the custom element before Angular sets its attributes, causing the Web Component to receive undefined values. The solution is to manually create the element using Renderer2, set all required attributes first, then append it to the DOM, ensuring the Web Component initializes with valid values every time.

## Full article

daily.dev links to this article rather than hosting it. Read it at the original source: <https://dev.to/this-is-angular/web-components-in-angular-why-passing-inputs-breaks-on-navigation-52b6>

---

Tags: [#webdev](https://daily.dev/tags/webdev), [#angular](https://daily.dev/tags/angular), [#dom](https://daily.dev/tags/dom), [#web-components](https://daily.dev/tags/web-components)

[View this post on daily.dev](https://daily.dev/posts/web-components-in-angular---why-passing-inputs-breaks-on-navigation-z7pvybo93)