Using $implict to pass multiple parameters - html

Question

I have a template to be recursive, something similar to below:
<ng-container *ngTemplateOutlet="testTemplate; context: {$implicit:jsonObj1}">
</ng-container>
<ng-template #testTemplate let-Json1>
</ng-template>
It works fine, I send jsonObj1 using $implicit, but I would like to send two parameters to , if I try:
context: {$implicit:jsonObj1, $implicit:jsonObj2}
and try to access using
<ng-template #filterTemplate let-Json1 let-json2>
</ng-template>
It doesn't work, let me know, how to pass two parameters.

Answer 1

You don't need to use $implicit
You can use
1:
context: {$implicit:jsonObj1, b:jsonObj2}
with
<ng-template #filterTemplate let-json1 let-json2="b">
<div>{{json1}}</div></div>{{json2}}</div>
</ng-template>
or 2:
context: {$implicit: {a: jsonObj1, b:jsonObj2}}
with
<ng-template #filterTemplate let-json1>
<div>{{json1.a}}</div></div>{{json1.b}}</div>
</ng-template>
or 3:
context: {a:jsonObj1, b:jsonObj2}
with
<ng-template #filterTemplate let-json1="a" let-json2="b">
<div>{{json1}}</div></div>{{json2}}</div>
</ng-template>

Answer 2

Here are couple more (similar) options, this one includes using 'ngTemplateOutletContext' and also a condition (in 4th argument - for fun).
... to try - should work by copy and paste ...
<!-- DEMO using:
"=templateID; context:{prop:value, ...}"
( 4 arguments demo)
Note: $implicit identifies the default argument in the template.
The template does not need to assign the argument name,
- see the 3rd argument
-->
<div *ngFor="let item of ['Aaa', 'Bbb', 'Ccc']; index as ix">
<ng-container *ngTemplateOutlet="myTemplate1;
context:{cDemoName:'Option 1:',
cIx:ix+1,
$implicit:item,
cIsEven: ((ix % 2) === 0) ? 'true' : 'false' }">
</ng-container>
</div>
<hr>
<!-- DEMO using:
[ngTemplateOutlet]="templateID"
[ngTemplateOutletContext]="{"=templateID; context:{prop:value, ...}"
-->
<div *ngFor="let item of ['Dddd', 'Eee', 'Fff']; index as ix">
<ng-container [ngTemplateOutlet]="myTemplate1"
[ngTemplateOutletContext]="{
cDemoName:'Option 2',
cIx:ix+1,
$implicit:item,
cIsEven: ((ix % 2) === 0) ? 'true' : 'false' }
">
</ng-container>
</div>
<!-- DEMO template:
( 4 arguments expected)
-->
<ng-template #myTemplate1
let-cDemoName="cDemoName"
let-cIx="cIx"
let-cItem
let-cIsEven="cIsEven">
Context arguments demo name: {{cDemoName}} <br>
. . . . . Context index: {{cIx}} <br>
. . . . . Context item: --- {{ cItem }} --- <br>
. . . . . Context is-even: {{ cIsEven }} <br>
<br>
</ng-template>