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

Having trouble assigning a value of `undefined` to a TextField state in React hook

The functionality of verifying the type of an item in a list using Typescript is not functioning

The error message "The type 'MouseEvent' is non-generic in TypeScript" popped up on the screen

Changing md-sidenav mode in Angular Material 2

Move the page to the beginning of the vertical stepper upon clicking the "next" button

Unlocking the value of the "input" field within an EventListener function in Angular directly from the DOM

Angular is facing problems with routing and caching, as the route path includes an empty string

Using a child element in a component to access a directive method: What steps should you follow?

The FireBase getToken function with the forceRefresh set to true has failed to perform as expected

A guide on transferring received data from dataService within the parent component to the child component in Angular2

JavaScript - Employing the .every function with an array containing objects

Angular 2 error: "HttpService Provider Not Found"

Tips for integrating the react-financial-charts library into your React and JavaScript project

Navigating nested data structures in reactive forms

Issues encountered while establishing a connection to an API in React Native

Creating and accessing files within the `dist` folder in Angular 5: A comprehensive guide

"Angular SwtAlert2: The Ultimate Multi-Selection Tool

Flag is activated to retrieve the data from the @Input source

The module named "mongoose" does not have any member called 'PaginateResult' exported

Center the mat-icon within a label