Using $implict to pass multiple parameters

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.

score 91 · Accepted Answer · edited Oct 03 '19 at 19:19

91

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>

edited Oct 03 '19 at 19:19

batista

181
2
10

answered Jan 30 '18 at 14:53

Günter Zöchbauer

623,577
216
2,003
1,567

7

Best answer. Usually, people searched for third scenario. – Igor Kurkov Jan 27 '21 at 17:05
1

3rd scenario should be like that [ngTemplateOutletContext]="{a:jsonObj1, b:jsonObj2}" – nevra May 24 '23 at 08:54

Felix · Answer 2 · 2020-01-09T00:23:09.063

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>

Using $implict to pass multiple parameters

2 Answers2

Linked