unable to properly access context object in EmbeddedView

Question

In my application, I am creating an embedded view and am passing a context to it.

thumbnailTemplateRef:TemplateRef<ThumbnailContext>;
...

let thumbnailContext = new ThumbnailContext(divId, 
  buttonId,
  imgId,
  closeId,
  imageString,this.thumbnailContainerRef.length,null);
console.log("saving image context ",thumbnailContext);
thumbnailTemplateViewRef = this.thumbnailContainerRef.createEmbeddedView(this.thumbnailTemplateRef, thumbnailContext);

In the HTML, I am trying to access the context in the following way.

<ng-template #thumbnailTemplate let-context="thumbnailContext"> 

  <div id="{{context.divId}}"> 
    <button id="{{context.buttonId}}" type="button" data-toggle="modal" (click)="showEnlargeImage(context)"> 
      <img id="{{context.imgId}}" src="{{context.imgSrc}}"/> 
    <a *ngIf="this.isEditing" href="javascript:void(0)" id="{{context.closeId}}" (click)="deleteThumbnailFromContainer(context)"></a> 
  </div>
</ng-template>

I see the following print in the console.

saving image context

ThumbnailContext {divId: "thumbnail-1", buttonId: "thumbnail-button-1", imgId: "img-1", closeId: "close-button-1", imgSrc: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABVYA…7Jj8HyDnRt/ePaJ5eXn8Azv0jA3o5lvcAAAAASUVORK5CYII=", …}
buttonId: "thumbnail-button-1"
closeId: "close-button-1"
divId: "thumbnail-1"
imgId: "img-1"
imgSrc: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABVYA"
index: 0
viewRefId: null
__proto__: Object

But I am getting the following error during execution

Cannot read property 'divId' of undefined correspoding to the html code <div id="{{context.divId}}">

What am I doing wrong here?

score 0 · Answer 1 · answered Dec 06 '19 at 11:36

Referring to How to use an EmbeddedViewRef's context variable, if I want to access context variable in ThumbnailContext onject, I need to first have a context key in the ThumbnailContext object and then use let-context="context". So I changed the code to the following

export class ImageContext {
  constructor(public divId:string,
              public buttonId:string,
              public imgId: string,
              public closeId:string,
              public imgSrc:string,
              public index:number,
              public viewRefId:EmbeddedViewRef<ThumbnailContext>){} //TODOM - not sure if the types are correct
}
export class ThumbnailContext{
  constructor(public context:ImageContext){}
}


  @ViewChild("thumbnailTemplate",{read:TemplateRef})
  thumbnailTemplateRef:TemplateRef<ThumbnailContext>;

    let thumbnailContext = new ThumbnailContext(new ImageContext(divId, 
      buttonId,
      imgId,
      closeId,
      imageString,this.thumbnailContainerRef.length,null));

    thumbnailTemplateViewRef = this.thumbnailContainerRef.createEmbeddedView(this.thumbnailTemplateRef, thumbnailContext); 

    <ng-template #thumbnailTemplate let-context="context"> <!-- thumbnailContext is the name of the variable passed to createEmbeddedView. Check .ts file-->

      <div id="{{context.divId}}"> 
        <button id="{{context.buttonId}}" type="button" data-toggle="modal" (click)="showEnlargeImage(context)"> 
          <img id="{{context.imgId}}" src="{{context.imgSrc}}"/> 
        </button>

unable to properly access context object in EmbeddedView

1 Answers1