liveBook · Manning

setInput

As explained in Modern Angular

ComponentRef.setInput is an Angular component-reference method that assigns an input value while integrating the assignment with change detection.

ComponentRef.setInput assigns an input on a dynamically created Angular component while preserving change detection and component lifecycle behavior. Direct instance assignment changes the property but does not immediately trigger change detection or invoke ngOnChanges. section 4.1.4

Updating a dynamic loader

A loading directive creates LoaderComponent dynamically, passes its projected content, and calls loaderRef.setInput('loading', this.loading) during initialization and subsequent changes. This keeps the dynamic component synchronized with the directive input.

How Modern Angular covers it

How deep it goes
Explains the limitation of direct assignment and demonstrates initialization and change-update calls, without covering internal framework implementation.
Examples
Uses a dynamically created loader directive whose loading input controls projected content and nested loading states.
What it assumes
Assumes familiarity with Angular inputs, directives, ComponentRef, dynamic component creation, and lifecycle hooks.
What you can do after
Apply setInput to update inputs on dynamically created components without bypassing change detection or lifecycle hooks.
How it connects
Connects dynamic components with ComponentRef, change detection, component lifecycle, inputs, directives, and projected content.
Cover of Modern Angular
liveBookmanning.com
Read Modern Angular on liveBook Get the book at manning.com

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Modern Angular. The section links point to the parts of the book it draws on.