Pattern: How to properly pass inputs to dynamically created Angular c...

Documentation for Sessions

🎨 Pattern: How to properly pass inputs to dynamically created Angular c...

📋 Decision Context

Question:

How to properly pass inputs to dynamically created Angular components using ViewContainerRef.createComponent()?

Task: Session 39: Fix blank panels in dock-layout integration with unified-builder

🎯 Decision Made

Chosen:

Always use componentRef.setInput('inputName', value) without checking 'inputName' in instance first. The 'in' operator check fails for @Input() decorated properties that haven't been set yet because they don't exist as enumerable own properties on the dynamically created instance.

Options Considered:

  1. Check 'propertyName' in instance before calling setInput()
  2. Always call setInput() for all expected inputs without checking
  3. Use direct property assignment (instance.prop = value)
  4. Use @Input() with signal inputs

💭 Reasoning

When Angular creates a component dynamically via ViewContainerRef.createComponent(), the @Input() decorated properties are not immediately available as enumerable properties on the instance. The check 'propertyName' in instance returns false, causing setInput() to never be called. This results in ngOnChanges never firing in the child component. The correct approach is to always call setInput() for known inputs - Angular handles undefined values gracefully and properly triggers change detection.

📁 Files Involved

🔗 Related

Auto-generated by MCP Smart Consolidation