How to access a template variable within a component

Question

How to access a template variable within a component

I encountered a problem with ng-template.

In our table component, we pass parameters using ngTemplateOutletContext as shown below. Depending on the data type, we use different renderers for the cells. Pay attention to the cellvalue parameter, it is crucial for my needs.

<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 within the rendering component appears like this:

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

Although the template can access the cellvalue parameter and function correctly, I am struggling to access the same parameter from the TS component.

I have attempted the following snippet so far:

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

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

However, the cellvalue does not appear in the console.log.

Thank you in advance!

javascript angular typescript angular5

Answer 1

Answer №1

With guidance from @SebOlens, I found the solution by creating a directive with exportAs. Here is the directive code:

TypeScript

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

This directive can be used in a template like this:

HTML

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

The cellvalue can then be accessed from the component using:

TypeScript

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

In my case, the directive initializes after the AfterViewInit of the component. To handle this, you can either watch the value of the ViewChild variable or use a temporary component activated with an ngIf and an exposed variable from the template to utilize the hooks of the new component.

Thank you once again @SebOlens :)

Answer 2

With guidance from @SebOlens, I found the solution by creating a directive with exportAs. Here is the directive code:

TypeScript

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

This directive can be used in a template like this:

HTML

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

The cellvalue can then be accessed from the component using:

TypeScript

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

In my case, the directive initializes after the AfterViewInit of the component. To handle this, you can either watch the value of the ViewChild variable or use a temporary component activated with an ngIf and an exposed variable from the template to utilize the hooks of the new component.

Thank you once again @SebOlens :)

Answer 3

Answer №2

Just a friendly suggestion, not necessarily an answer. Please don't penalize if it doesn't solve the issue.

Have you considered attempting something like this?

html

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

ts

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

I'm uncertain about its success as constructions like #cellValue="cellvalue" typically require directives with an exportAs descriptor in their decorators.

This approach won't function:

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

It targets the template itself rather than the dynamically generated portion of the DOM. You may want to try referencing the specific DOM element generated by the template instead.

Answer 4

Just a friendly suggestion, not necessarily an answer. Please don't penalize if it doesn't solve the issue.

Have you considered attempting something like this?

html

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

ts

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

I'm uncertain about its success as constructions like #cellValue="cellvalue" typically require directives with an exportAs descriptor in their decorators.

This approach won't function:

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

It targets the template itself rather than the dynamically generated portion of the DOM. You may want to try referencing the specific DOM element generated by the template instead.

How to access a template variable within a component

Answer №1

Answer №2

Similar questions

React/Redux encountered a roadblock when attempting to iterate through an array stored in the state

Is it possible to obtain the output of a JavaScript file directly? (kind of like AJAX)

Extract a section of the table

Import resolves Uncaught ReferenceError by preventing access to 'xx' before it is initialized

Exploring the implementation of JavaScript bit-shift and bit-wise operations in Java

Rearrange component positions without triggering a re-render

MongoDB issued an error notification stating: "The operation `disneys.insertOne()` has experienced a timeout after 10000 milliseconds."

Guide on utilizing direction.set within threejs for Vector3 types

Reveal concealed fields following the selection of a specific option

Guide on updating a variable to the following string within an array

Using ASP.NET MVC, pass a list of values separated by commas to an action method

Adjust the height of a CSS div to automatically fit the space between two other divs

Identified the category

Issue with jQuery 'on' event not triggering following 'load' event

Unleashing the power of plugins and custom configurations in your next.js next.config.js

Establishing a global variable in Cypress through a function

Transmit a base64-encoded image in an HTTP request to the server

Enhancing UI design with Vue.js

When the enter key is pressed, shift the text to a different input field

Display various divs simultaneously based on the quantity of items in the dropdown menu