Access template variable inside component

Question

I ran into an issue with ng-template.

We are passing some parameters via ngTemplateOutletContext like below in a table component. 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 component 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 component'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!

Nope, no errors, just no way to access the data that I want. — Ivan
– Ivan, Commented Jul 3, 2018 at 12:03

AlexElin · Accepted Answer · 2021-03-28 18:49:35Z

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 component:

TS

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

In my case the directive inits after the AfterViewInit of the component, 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 component activated with an ngIf and a exposed variable from the template so I could use the hooks from the new component.

Thanks again @SebOlens :)

edited Mar 28, 2021 at 18:49

AlexElin

1,7991 gold badge19 silver badges29 bronze badges

answered Jul 4, 2018 at 8:50

Ivan

1801 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sebastian Oleński Over a year ago

I'm glad it worked :) Don't forget to upvote the answer

Ivan Over a year ago

Done, sorry I forgot :)

Sebastian Oleński · Accepted Answer · 2018-07-03 11:47:53Z

1

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.

answered Jul 3, 2018 at 11:47

Sebastian Oleński

5384 silver badges15 bronze badges

3 Comments

Ivan Over a year ago

As you said, your first solution won't work because it isn't a directive with exporAs. I've tried accessing like this and returns undefined: HTML

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

TS

@ViewChild('test', { read: TemplateRef })   public cellValue: any;   ngAfterViewInit() {     console.log(this.cellValue);   }

Sorry for the code formatting :S

Sebastian Oleński Over a year ago

you can always make a directive with exportAs, assing cellvalue to it and then reference it like I did.

Sebastian Oleński Over a year ago

also don't read TemplateRef of an object which isn't a template, read ViewContainerRef or ElementRef.

Collectives™ on Stack Overflow

Access template variable inside component

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related