ngOutletContext causes template to re-initialize on data changes

https://plnkr.co/edit/mUXkCli6CUEyNlbn2PZV?p=preview

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Minimal reproduction of the problem with instructions

     <template #chartsManagerTemplate let-data="data">
         <charts-manager data="data"></charts-manager>
    </template>
    
     <template [ngOutletContext]="{ data: chartsData }"
            [ngTemplateOutlet]="chartsManagerTemplate">
     </template>

In the component:

     this.loadChartsData().subscribe(data => {

          //this causes the template to re-instantiate, I believe it should not.
          this.chartsData = data; 
     });

Current behavior

When data passed into [ngOutletContext] changes, the template and its nested components are re-instantiated.

Expected behavior

The expected behavior is for the template to not be re-instantiated, similar to if a template was not used. For example, this:

     <template [ngOutletContext]="{ data: chartsData }"
            [ngTemplateOutlet]="chartsManagerTemplate">
     </template>

should behave the same as:

<charts-manager data="chartsData"></charts-manager>

and NOT re-instantiate

What is the motivation / use case for changing the behavior?
Nested component should have the ability to control when they redraw, rather than it being forced simply by the use of . In my case, I would like to redraw charts with a transition.

Please tell us about your environment:

Angular version: 2.0.X
2.0.0
Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

Language: [all | TypeScript X.X | ES6/7 | ES5]
Node (for AoT issues): node --version =

Provide a small repro in plunkr

https://plnkr.co/edit/mUXkCli6CUEyNlbn2PZV?p=preview

@parliament718

Still an issue in 4.x http://plnkr.co/edit/J3pPvM0Cstq2BtTaxY2h?p=preview

@parliament718 workaround https://plnkr.co/edit/kR2oTyTubaAS4UdFISM6?p=preview

The issue described here is a combination of 2 implementation decisions:

view engine / change detection engine will recreate objects literals used in expressions: https://plnkr.co/edit/vqBYylnvSkbJVgJW5LO5

ngTemplateOutlet will re-create templates as soon as a bound context changes:

angular/packages/common/src/directives/ng_template_outlet.ts

Lines 51 to 60 in 5344be5

    
           ngOnChanges(changes: SimpleChanges) { 
        
             if (this._viewRef) { 
        
               this._viewContainerRef.remove(this._viewContainerRef.indexOf(this._viewRef)); 
        
             } 
        
             if (this.ngTemplateOutlet) { 
        
               this._viewRef = this._viewContainerRef.createEmbeddedView( 
        
                   this.ngTemplateOutlet, this.ngTemplateOutletContext); 
        
             } 
        
           }

We could change implementation of the ngTemplateOutlet although it would be a bit tricky. before doing so I will dig into part of the view / CD engine that re-creates object literals.

@DzmitryShylovich

I think the root problem for ngTemplateOutlet is ViewContainerRef.context to be readonly so we can't change a context but just create it once and then mutate it.
When @DzmitryShylovich tried to fix that issue this was his main issue, if user provides a new context we can't just replace it but we would have to run a differ and mutate the actual context to shape it exactly like the new context being passed.
I find it weird for Angular to enforce mutation of data here when it's more about immutable data everywhere else.

So I think there should be a way to change the context (the reference), maybe through a function to ensure/prevent some behavior.

fix(common): don't recreate view when context shape doesn't change

fix(common): don't recreate view when context shape doesn't change (#…

fix(common): don't recreate view when context shape doesn't change (a…

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

Navigation Menu

Repository navigation

ngOutletContext causes template to re-initialize on data changes #13407

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	ngOnChanges(changes: SimpleChanges) {
	if (this._viewRef) {
	this._viewContainerRef.remove(this._viewContainerRef.indexOf(this._viewRef));
	}

	if (this.ngTemplateOutlet) {
	this._viewRef = this._viewContainerRef.createEmbeddedView(
	this.ngTemplateOutlet, this.ngTemplateOutletContext);
	}
	}

ngOutletContext causes template to re-initialize on data changes #13407

Description

Activity

DzmitryShylovich commented on Dec 12, 2016

parliament718 commented on Dec 12, 2016

DzmitryShylovich commented on Mar 3, 2017

pkozlowski-opensource commented on Jul 19, 2017

ghetolay commented on Jul 19, 2017

angular-automatic-lock-bot commented on Sep 12, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions