I ran into an issue with ng-template.

We are passing some parameters via ngTemplateOutletContext like below in a table ponent. We use different renderers for the cells depending on the type of data contained inside. Notice the cellvalue parameter as it is what I need.

<ng-container *ngIf="useCellRenderer(column, row)">
   <ng-template [ngTemplateOutlet]="column.renderer.templateref" [ngTemplateOutletContext]="{ cellvalue: row[column.attr], rowvalue:row }">
   </ng-template>
</ng-container>

The template of the ponent in charge of the rendering looks as follows:

<ng-template #templateRef let-cellvalue="cellvalue" let-rowvalue="rowvalue">
  {{ getTraslateValue(cellvalue)}}
</ng-template>

The template is able to access the cellvalue parameter and call the function correctly, but I want to access the same parameter from the ponent's TS and can't seem to be able to do it.

What I've tried so far goes along the line of the following snippet

@ViewChild('templateRef', { read: TemplateRef })
  public templateref: TemplateRef<any>;

  ngAfterViewInit() {
    console.log('ngAfterViewInit', this.templateref.elementRef);
  }

But cellvalue is nowhere to be found in the console.log

Thanks in advance!

I ran into an issue with ng-template.

We are passing some parameters via ngTemplateOutletContext like below in a table ponent. We use different renderers for the cells depending on the type of data contained inside. Notice the cellvalue parameter as it is what I need.

<ng-container *ngIf="useCellRenderer(column, row)">
   <ng-template [ngTemplateOutlet]="column.renderer.templateref" [ngTemplateOutletContext]="{ cellvalue: row[column.attr], rowvalue:row }">
   </ng-template>
</ng-container>

The template of the ponent in charge of the rendering looks as follows:

<ng-template #templateRef let-cellvalue="cellvalue" let-rowvalue="rowvalue">
  {{ getTraslateValue(cellvalue)}}
</ng-template>

The template is able to access the cellvalue parameter and call the function correctly, but I want to access the same parameter from the ponent's TS and can't seem to be able to do it.

What I've tried so far goes along the line of the following snippet

@ViewChild('templateRef', { read: TemplateRef })
  public templateref: TemplateRef<any>;

  ngAfterViewInit() {
    console.log('ngAfterViewInit', this.templateref.elementRef);
  }

But cellvalue is nowhere to be found in the console.log

Thanks in advance!

• javascript
• angular
• typescript
• angular5

Share Improve this question Follow asked Jul 3, 2018 at 11:30 IvanIvan 18011 silver badge1212 bronze badges 2

• any errors in the console – Sachila Ranawaka Commented Jul 3, 2018 at 11:32
• Nope, no errors, just no way to access the data that I want. – Ivan Commented Jul 3, 2018 at 12:03

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

So @SebOlens has guided me to the solution with what he said. I ended creating a directive with exportAs. The directive is as follows:

TS

@Directive({ selector: '[exposeVariable]', exportAs: 'exposed' })
export class ExposeVariableDirective {
  @Input() variablesToExpose: any;
  }
}

It can be used in the template in the following way for example:

HTML

<ng-template #templateRef let-cellvalue="cellvalue" let-rowvalue="rowvalue">
  <div exposeVariable [variablesToExpose]="{cellValue: cellvalue}" #exposedRef="exposed">
    {{ getTraslateValue(cellvalue)}}
  </div>
</ng-template>

And the cellvalue can be accessed from the ponent:

TS

@ViewChild('exposedRef') public directiveExposed: any;

In my case the directive inits after the AfterViewInit of the ponent, so if you try to initialise something you will have to either watch the value of the ViewChild variable or, in my case, I did a ponent activated with an ngIf and a exposed variable from the template so I could use the hooks from the new ponent.

Thanks again @SebOlens :)

Ok so this is not an answer just a suggestion so please do not minus it if it doesn't work.

Have you tried something like that ?

html

<ng-template #cellValue="cellvalue" let-cellvalue="cellvalue" let-rowvalue="rowvalue">
  {{ getTraslateValue(cellvalue)}}
</ng-template>

ts

@ViewChild('cellValue') public cellValue: any;

I'm not sure if it's going to work cause constructions like #cellValue="cellvalue" work only with directives which have exportAs description in their decorators

This is not going to work:

@ViewChild('templateRef', { read: TemplateRef })
  public templateref: TemplateRef<any>;

because it references the template itself not the generated part of dom. Maybe try referencing the part of the dom which is generated by the template.