Supply context to NgTemplateOutlet

[shlomiassaf]

Current behavior
NgTemplateOutlet does not accept context.

Expected/desired behavior
NgTemplateOutlet has an additional @Input that allows attaching local context to EmbeddedViewRef

Other information
After feat(core): introduce template context it is relativly easy to supply a context to the template ref

Should be something like

import {Directive, Input, ViewContainerRef, ViewRef, TemplateRef} from 'angular2/core';
import {isPresent} from 'angular2/src/facade/lang';

/**
 * Creates and inserts an embedded view based on a prepared `TemplateRef`.
 *
 * ### Syntax
 * - `<template [ngTemplateOutlet]="templateRefExpression"></template>`
 */
@Directive({selector: '[ngTemplateOutlet]'})
export class NgTemplateOutlet {
  private _insertedViewRef: ViewRef;
  private _context: Object;

  constructor(private _viewContainerRef: ViewContainerRef) {}

  @Input()
  set ngTemplateOutletContext(context: Object) {
    this._context = context;
  }

  @Input()
  set ngTemplateOutlet(templateRef: TemplateRef<Object>) {
    if (isPresent(this._insertedViewRef)) {
      this._viewContainerRef.remove(this._viewContainerRef.indexOf(this._insertedViewRef));
    }

    if (isPresent(templateRef)) {
      this._insertedViewRef = this._viewContainerRef.createEmbeddedView(templateRef, this._context);
    }
  }
}

[shlomiassaf]

@tbosch

[shlomiassaf]

I'm not sure it will work, given that these are 2 different templates.

    ctx = { self: {} };

<template [ngTemplateOutlet]="templateRef" [ngTemplateOutletContext]="ctx"></template>

<template #templateRef let-self="self">
    <pre>{{self | json }}</pre>
</template>

Will this work? let-self will search in the original template, not the injected one right?
So is this doable?

[bekos]

This doesn't seem so easy to achieve atm, but it would be really useful 👍
cc @pkozlowski-opensource

[pkozlowski-opensource]

This would be very easy to do, technically speaking - we just need to come up with an appropriate API for this.

[bekos]

@pkozlowski-opensource Awesome! Looking forward to this :-)

[pmowrer]

@shlomiassaf Your sample implementation works well... thanks!

[fxck]

According to @pkozlowski-opensource the code posted on #8368 (comment) looks ok, there are couple of test cases that needs to be added(https://gitter.im/angular/angular?at=5755486d824488852c4f3cdc)

• data from context gets displayed
• data changes if you update context (ex. add new property)
• Another case to consider would be what happens when the context gets re-binded (reference to an object changes)

[pkozlowski-opensource]

This was fixed in kaster via 164a091

[angular-automatic-lock-bot]

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.}