Template for typed variable - `ng-template`

Question

Template for typed variable - `ng-template`

How can the parent component correctly identify the type of let-content that is coming from ngTemplateOutletContext? The current usage of {{content.type}} works as expected, but my IDE is showing:

unresolved variable type

Is there a way to specify the type as Video?

parent.component.ts:

export interface Video {
  id: number;
  duration: number;
  type: string;
}

public videos: Video = [{id: 1, duration: 30, type: 'documentary'}];

parent.component.html:

<ul>
  <li *ngFor="let video of videos">
    <tile [bodyTemplate]="tileTemplate" [content]="video"></app-card>
  </li>
</ul>

<ng-template #tileTemplate let-content>
  <h5 class="tile__type">{{content.type}}</h5>
</ng-template>

tile.component.ts:

@Component({
  selector: 'tile',
  templateUrl: './tile.component.html',
  styleUrls: ['./tile.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CardComponent {
  @Input() tileTemplate: TemplateRef<any>;
  @Input() content: Video;
}

tile.component.html:

<div
...
  <ng-container
    [ngTemplateOutlet]="tileTemplate"
    [ngTemplateOutletContext]="{ $implicit: content }">
  </ng-container>
...
</div>

angular typescript

Answer 1

Answer №1

I developed a custom directive to address this issue.

import { Directive, Input, TemplateRef } from '@angular/core';

@Directive({selector: 'ng-template[typedTemplate]'})
export class TypedTemplateDirective<TypeToken> {

  // specifying the type for the directive
  @Input('typedTemplate')
  typeToken: TypeToken;

  // accessing the template from Angular
  constructor(private contentTemplate: TemplateRef<TypeToken>) {
  }

  // defining the context type for the directive and template
  static ngTemplateContextGuard<TypeToken>(dir: TypedTemplateDirective<TypeToken>, ctx: unknown): ctx is TypeToken{ return true; }
}

Usage example:

<!-- typedTemplate is the directive, typeToken is an object on our component -->
<ng-template #someTemplate [typedTemplate]="typeToken" let-param="param">
  {{param}}
</ng-template>

In the component:

// creating typeToken to define parameter types
typeToken: { param: string };

Answer 2

I developed a custom directive to address this issue.

import { Directive, Input, TemplateRef } from '@angular/core';

@Directive({selector: 'ng-template[typedTemplate]'})
export class TypedTemplateDirective<TypeToken> {

  // specifying the type for the directive
  @Input('typedTemplate')
  typeToken: TypeToken;

  // accessing the template from Angular
  constructor(private contentTemplate: TemplateRef<TypeToken>) {
  }

  // defining the context type for the directive and template
  static ngTemplateContextGuard<TypeToken>(dir: TypedTemplateDirective<TypeToken>, ctx: unknown): ctx is TypeToken{ return true; }
}

Usage example:

<!-- typedTemplate is the directive, typeToken is an object on our component -->
<ng-template #someTemplate [typedTemplate]="typeToken" let-param="param">
  {{param}}
</ng-template>

In the component:

// creating typeToken to define parameter types
typeToken: { param: string };

Answer 3

Answer №2

When it comes to let-* variables, type inference is not available. The Angular micro syntax parser incorporates the let- context, making it challenging for IDEs to deduce the type due to the lack of a clear origin.

To address this issue, you can attempt to suppress the IDE warning by utilizing $any()

For more information, check out https://angular.io/guide/template-syntax#the-any-type-cast-function

<ng-template #tileTemplate let-content>
  <h5 class="tile__type">{{$any(content).type}}</h5>
</ng-template>

If you wish to enforce type inference, you can achieve this by implementing a function:

<ng-template #tileTemplate let-content>
  <h5 class="tile__type">{{toVideo(content).type}}</h5>
</ng-template>

public toVideo(value: any): Video { return value as Video; }

Answer 4

When it comes to let-* variables, type inference is not available. The Angular micro syntax parser incorporates the let- context, making it challenging for IDEs to deduce the type due to the lack of a clear origin.

To address this issue, you can attempt to suppress the IDE warning by utilizing $any()

For more information, check out https://angular.io/guide/template-syntax#the-any-type-cast-function

<ng-template #tileTemplate let-content>
  <h5 class="tile__type">{{$any(content).type}}</h5>
</ng-template>

If you wish to enforce type inference, you can achieve this by implementing a function:

<ng-template #tileTemplate let-content>
  <h5 class="tile__type">{{toVideo(content).type}}</h5>
</ng-template>

public toVideo(value: any): Video { return value as Video; }

Answer 5

Answer №3

To ensure your IDE cooperates and offers code completion, utilize a custom type guard:

Include a method in your class that accepts a variable as a parameter and returns the same variable:

export class PlayerComponent {
  ...
  public player = (selected: Player) => selected;
}

Then, simply apply the function to the variable in your template:

<p class="selected__player">{{player(selection).name}}</p>

Answer 6

To ensure your IDE cooperates and offers code completion, utilize a custom type guard:

Include a method in your class that accepts a variable as a parameter and returns the same variable:

export class PlayerComponent {
  ...
  public player = (selected: Player) => selected;
}

Then, simply apply the function to the variable in your template:

<p class="selected__player">{{player(selection).name}}</p>

Answer 7

Answer №4

An alternative approach to creating a new directive, this method is similar to another workaround mentioned by @Reacangular.

To solve this issue, you can wrap your variable inside an additional ng-template. I prefer this solution over others as it only requires adding 2 more lines of code in the HTML. Of course, if you are using your variable only once or twice, the approach from @Reactangular's answer might be better. Here's my solution:

Instead of using:

<ng-template *ngTemplateOutlet="foo; context: {$implicit: {fooProp: 'Hello!'}}"></ng-template>
<ng-template #foo let-args>
    This is untyped: {{ args.fooProp }}<br>
</ng-template>

Try this instead:

<ng-template *ngTemplateOutlet="foo; context: {$implicit: {fooProp: 'Hello!'}}"></ng-template>
<ng-template #foo let-untypedArgs>
    <ng-container *ngIf="identity(untypedArgs) as args">
        This is typed: {{ args.fooProp }}<br>
    </ng-container>
</ng-template>

identity(foo: Foo): Foo {
    return foo;
}

The type assertion is recognized by the IDE when using *ngFor or *ngIf. One drawback of this solution is that the inner <ng-container> is rendered later due to the *ngIf statement.

With this change, now if you add an invalid property to your context, you will receive a compilation error, which is beneficial. Check out the demo on StackBlitz:

Property 'newFooProp' does not exist on type 'Foo'.

As noted in the comments, similar to the accepted answer, this solution has the downside of calling ngZone every lifecycle. It may be advisable to use this in conjunction with ChangeDetectionStrategy.OnPush.

Answer 8

An alternative approach to creating a new directive, this method is similar to another workaround mentioned by @Reacangular.

To solve this issue, you can wrap your variable inside an additional ng-template. I prefer this solution over others as it only requires adding 2 more lines of code in the HTML. Of course, if you are using your variable only once or twice, the approach from @Reactangular's answer might be better. Here's my solution:

Instead of using:

<ng-template *ngTemplateOutlet="foo; context: {$implicit: {fooProp: 'Hello!'}}"></ng-template>
<ng-template #foo let-args>
    This is untyped: {{ args.fooProp }}<br>
</ng-template>

Try this instead:

<ng-template *ngTemplateOutlet="foo; context: {$implicit: {fooProp: 'Hello!'}}"></ng-template>
<ng-template #foo let-untypedArgs>
    <ng-container *ngIf="identity(untypedArgs) as args">
        This is typed: {{ args.fooProp }}<br>
    </ng-container>
</ng-template>

identity(foo: Foo): Foo {
    return foo;
}

The type assertion is recognized by the IDE when using *ngFor or *ngIf. One drawback of this solution is that the inner <ng-container> is rendered later due to the *ngIf statement.

With this change, now if you add an invalid property to your context, you will receive a compilation error, which is beneficial. Check out the demo on StackBlitz:

Property 'newFooProp' does not exist on type 'Foo'.

As noted in the comments, similar to the accepted answer, this solution has the downside of calling ngZone every lifecycle. It may be advisable to use this in conjunction with ChangeDetectionStrategy.OnPush.

Answer 9

Answer №5

By utilizing an *ngIf directive along with a function, you can type any template variable

<ng-container *ngIf="asMyType(anyType) as myType">
  <!-- Type definition of myType goes here -->
</ng-container>

const asMyType = (something: unknown) => something as myType;

This strategy can also be implemented within an ng-template to assign a type to a particular variable

<ng-template let-my-type="my-type">
  <ng-container *ngIf="asMyType(my-type) as myType">
    <!-- Typed content for myType is defined here -->
  </ng-container>
</ng-template>

Answer 10

By utilizing an *ngIf directive along with a function, you can type any template variable

<ng-container *ngIf="asMyType(anyType) as myType">
  <!-- Type definition of myType goes here -->
</ng-container>

const asMyType = (something: unknown) => something as myType;

This strategy can also be implemented within an ng-template to assign a type to a particular variable

<ng-template let-my-type="my-type">
  <ng-container *ngIf="asMyType(my-type) as myType">
    <!-- Typed content for myType is defined here -->
  </ng-container>
</ng-template>

Template for typed variable - `ng-template`

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Using ngTemplateOutlet to pass ng-template to a child component in Angular 5

having difficulties in separating the mat-table header

Tips for sidestepping CORS issues when using sendFile in Express.js

Differences in weekend start and end days vary across cultures

What is the method for storing a JSON object path in a variable for use in a template?

Using Angular: A guide to setting individual values for select dropdowns with form controls

Exporting Javascript functions is not possible

Executing a PHP function within a Laravel controller using Ajax

What is the most efficient way to retrieve 10,000 pieces of data in a single client-side request without experiencing any lag

Learn how to implement icons within Textfield components using Material-UI and TypeScript in React

Retrieving JSON data through HttpClient in Angular 7

The IDE is showing an error, but Jest is able to run it flawlessly

Ways to verify whether any of the variables exceed 0

List the attributes that have different values

What is the best way to incorporate node modules into my tsconfig file?

What could be the reason for the exclusion of 'null' from the return type of Document.getElementById in VS Code?

Streamline imports with Typescript

The 'type' property within the NGRX Effect is not present in the type Observable<any[]>

The function e.preventDefault() appears to be ineffective when applied to both the submit button and anchor tag within an

Ensure that the dynamically inserted <title> tag remains intact in Angular even when the page is re