CODEWITHSUNDEEP
angulartypescriptviewchild
DBK
DBK

Reputation: 403

Changes made to the input within the dynamically created component are not reflected in the reference (ComponentReference) in Angular

enter image description here

FundRollingStatisticChartComponent dynamically creates FundRollingStatisticsChartConfigComponent, and it has a reference to the instance of FundRollingStatisticsChartConfigComponent: this.configPanelRef = this.globalSlideout.createComponent(FundRollingStatisticsChartConfigComponent, { width: this.globalConstants.slideoutSettingsWidth }, inputs, outputs);

FundRollingStatisticsChartConfigComponent has the slideout and a form called chatSettingsForm. When we mark the chatSettingsForm as pristine after someone modifies it, the changes are not reflected in the reference to the FundRollingStatisticsChartConfigComponent. this.configPanelRef.configSlideout.dontLeave is still true, meaning it says the form is still dirty

The only way it works is if we update the input via it's reference:

this.configPanelRef.configSlideout.dontLeave = false or update it via the view query (@ViewChild).

I tried a few things including setting the static parameter of the ViewChild decorator to false: @ViewChild('fundRollingStatisticsChartConfig', {static: false}) configSlideout: GlobalSlideoutComponent; and used setInput (https://netbasal.com/a-new-way-to-set-inputs-on-angular-componentrefs-6214f95db63d ) to set the inputs of the dynamically created component and a few other things but nothing helped. Can someone explain what is going on here?

Upvotes: 0

Views: 24

Answers (0)

Related Questions