I'm having a hard time trying to pass context data to my dynamicly created embeded view.

Note: I'm using Angular 2.4.7

Here is what i whant to achieve:

In my DialogPresetComponent (dialog-presetponent.html):

This component's view contain a bunch of template ready to be used within my dialog framework:

<template #presetInfo>
   {{options.description}} // Note this binding ! Here is the problem
</template>

Still in this component, i get a ref to those templates like this:

@ViewChild('presetInfo', { read: TemplateRef }) presetInfo: TemplateRef<any>;

Then, i store this templateRef in a DialogService, so i can access them later, and from somewhere else.

In DialogComponent (dialogponent.html):

Here is the template of my modal:

<div class='c-header'>
</div>
<div class='c-body'>
    <div #container></div>
</div>
<div class='c-footer'>
</div>

In DialogComponent (dialogponent.ts):

In my DialogComponent grab a reference to the container like this:

@ViewChild('container', {read: ViewContainerRef }) containerRef: ViewContainerRef;

I also define attributes that i want to access from my dynamicly injected template:

options: DialogOptions = { title: 'Dialog title' };

What am i trying to do:

I'm trying to put the template #presetInfo within the #container and with the context of my DialogComponent

So finaly, i inject my template in my component giving it the right context:

In my DialogComponent (dialogponent.ts):

// Where templateRef is the template previously  defined in DialogPresetComponent
createEmbeddedView( templateRef: TemplateRef<any> ) {
    this.containerRef.createEmbeddedView( templateRef, this );    
}

The problem come from the fact that the binding {{options.description}} in my injected template DO NOT WORK, even when passing the right context ('this' in my case) via createEmbeddedView.

The framework tell me that options is undefined.

What am i missing here ?

There is not a lot of documentation about this 'context' stuff, so i guess i'm not doing it the right way ....

Any clues or hints are welcome !

Thanks !

I'm having a hard time trying to pass context data to my dynamicly created embeded view.

Note: I'm using Angular 2.4.7

Here is what i whant to achieve:

In my DialogPresetComponent (dialog-preset.component.html):

This component's view contain a bunch of template ready to be used within my dialog framework:

<template #presetInfo>
   {{options.description}} // Note this binding ! Here is the problem
</template>

Still in this component, i get a ref to those templates like this:

@ViewChild('presetInfo', { read: TemplateRef }) presetInfo: TemplateRef<any>;

Then, i store this templateRef in a DialogService, so i can access them later, and from somewhere else.

In DialogComponent (dialog.component.html):

Here is the template of my modal:

<div class='c-header'>
</div>
<div class='c-body'>
    <div #container></div>
</div>
<div class='c-footer'>
</div>

In DialogComponent (dialog.component.ts):

In my DialogComponent grab a reference to the container like this:

@ViewChild('container', {read: ViewContainerRef }) containerRef: ViewContainerRef;

I also define attributes that i want to access from my dynamicly injected template:

options: DialogOptions = { title: 'Dialog title' };

What am i trying to do:

I'm trying to put the template #presetInfo within the #container and with the context of my DialogComponent

So finaly, i inject my template in my component giving it the right context:

In my DialogComponent (dialog.component.ts):

// Where templateRef is the template previously  defined in DialogPresetComponent
createEmbeddedView( templateRef: TemplateRef<any> ) {
    this.containerRef.createEmbeddedView( templateRef, this );    
}

The problem come from the fact that the binding {{options.description}} in my injected template DO NOT WORK, even when passing the right context ('this' in my case) via createEmbeddedView.

The framework tell me that options is undefined.

What am i missing here ?

There is not a lot of documentation about this 'context' stuff, so i guess i'm not doing it the right way ....

Any clues or hints are welcome !

Thanks !

• javascript
• angular
• templates

• Seems you're passing this as context. Is this intentional? – Günter Zöchbauer Commented Feb 23, 2017 at 16:23
• 1 Yes, that's intentional, i thaught, that passing 'this' whould make all my components members available from within the included template. Like if my template was part of the component view ... – Clement Commented Feb 23, 2017 at 16:43

1 Answer 1

this.containerRef.createEmbeddedView( templateRef, {$implicit: {description: 'some description'} } );    

<template #presetInfo let-options>
   {{options.description}} // Note this binding ! Here is the problem
</template>

If you pass an object with a property $implicit then just let-xxx is enough to make the $implicit value available as xxx within the template.

For other properties you need let-yyy="someProp" to make it available within the template as yyy.