CODEWITHSUNDEEP
angularangular2-templateangular2-directives
Marco Menardi
Marco Menardi

Reputation: 491

context is undefined after passing it to template

Why is rowData undefined inside extensiontemplate? It is ok before passing it to the extensiontemplate.

<ng-template>
  <ng-container *ngTemplateOutlet="extensiontemplate; context: rowData"></ng-container>
</ng-template>

<ng-template #extensiontemplate> 
<!-- here rowData is undefined -->
</ng-template>

Upvotes: 1

Views: 1743

Answers (1)

Ashish Ranjan
Ashish Ranjan

Reputation: 12960

You have to add a variable rowData in the template like:

<ng-template #extensiontemplate let-rowdata> 
    <!-- here rowData is undefined -->
</ng-template>

This will work, if your have added an $implicit property in the context(rowData), for example, your rowData is like:

rowData = {$implicit: 'row data'};

If you haven't added an implicit property then you need to have a variable with its value as the key in the context.

For example, if your context is 

rowData = {somethingElse: 'row data'};

The you need to have your template like:

<ng-template #extensiontemplate let-rowData="somethingElse"> 
    <!-- here rowData is undefined -->
</ng-template>

See this documentation: https://angular.io/api/common/NgTemplateOutlet

Edit

For your case, the retrieved rowData which you are passing into another template doesn't have any $implicit value, you need to assign it explicitily, do it like:

<ng-container *ngTemplateOutlet="extensiontemplate; context: rowData"></ng-container>
<ng-template let-viewDetails="vin" #extensiontemplate>
    <tr *ngIf="viewDetails">
        <td colspan="3">
            Additional row data here for VIN ID: {{viewDetails}}                  
        </td>
    </tr>
</ng-template>

Check it here: https://stackblitz.com/edit/angular-bmq2xi?file=src/app/app.component.html

Upvotes: 1

Related Questions