Template parsing error while using ngTemplateOutlet in Angular

Question

I get the following error while implementing ngTemplateOutlet in my Angular code

compiler.js:2420 Uncaught Error: Template parse errors:
Parser Error: Missing expected } at column 47 in [searchListing; context: {$implicit: entityList:genericJobList,
canCreateEntity:canCreateJob, nextBookmarkList:genericNextBmJobList,'disableScroll:disableJobScroll}]
in ng:///SharedSearchModule/SearchCompareComponent.html@707:7 ("

It says the error is on line 707. My code on line 707 is the code for ngTemplateOutlet itself

<ng-container 
    *ngTemplateOutlet="searchListing; context: {$implicit: entityList:genericJobList,
    canCreateEntity:canCreateJob, nextBookmarkList:genericNextBmJobList, 
    disableScroll:disableJobScroll}">
</ng-container>

Part of ng-template is as follows:

<ng-template #searchListing let-canCreateEntity="canCreateEntity" 
   let-entityList="entityList" let-nextBookmarkList="nextBookmarkList" 
   let-disableScroll="disableScroll">
   <!-- template code here -->
</ng-template>

I do not see a missing } as per the error encountered. The props that I am passing are of types boolean(canCreateEntity, disableScroll), array of objects(entityList) and string(nextBookmarkList). I cannot provide a working example as I cannot share the full code without modifying it. Can anyone point out what the error is

Answer 1

Your syntax is wrong. For $implicit, you have to pass a valid json object, so your context should look like this:

{
  $implicit: {
    entityList: genericJobList,
    canCreateEntity: canCreateJob,
    nextBookmarkList: genericNextBmJobList,
    disableScroll: disableJobScroll
  }
}

Of course the formatting is optional, it's just so the difference to your code is clearer. The error message you provided does even tell you that the expected } should be in column 47, which is where the second colon is. This is the point where the value can no longer be interpreted as valid json, so it supposes you forgot the closing bracket.

EDIT

Now that I took a closer look at how you use the context in your ng-template, your context should rather look like this:

{
  entityList: genericJobList,
  canCreateEntity: canCreateJob,
  nextBookmarkList: genericNextBmJobList,
  disableScroll: disableJobScroll
}

If you use $implicit, you can refer to the context like this:

<ng-template let-whatever>
  {{ whatever }}
</ng-template>

As you don't use the $implicit value, you don't have to provide one.