What is the best approach to apply type casting in an *ngFor loop for an array containing a variety of types in Angular?

Question

What is the best approach to apply type casting in an *ngFor loop for an array containing a variety of types in Angular?

I am facing a scenario where I have two objects named DeviceA and DeviceB, both belonging to the same parent class called Device.

interface Device {
  shared: string
}

interface DeviceA extends Device {
  attributeA: string[]
}

interface DeviceB extends Device {
  attributeB: number
}

Within my component, there is an array containing instances of DeviceA and DeviceB.

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  devices: (DeviceA | DeviceB)[] = [];
}

I am looking for guidance on how to iterate through this array in my template. The desired outcome is as follows:

<div *ngFor="let device of devices">
  <div *ngIf="'attributeA' in device">
    <span *ngFor="let str of device.attributeA">{{ str }}</span>
  </div>
  <div *ngIf="'attributeB' in device">
    <span>{{ device.attributeB }}</span>
  </div>
</div>

The issue arises during compilation with the error message: Property 'attributeA' does not exist on type 'DeviceA | DeviceB'

Any suggestions on how to properly handle typecasting in this situation?

angular typescript

Answer 1

Answer №1

When TypeScript is compiled, interfaces are lost and become objects, making it impossible to infer class types from interfaces using instanceOf. You can either continue using interfaces and infer types from parameters, or use classes with instanceOf. To implement these operations in HTML with Angular, pipes are used. Check out the examples below and the code here.

The code on StackBlitz demonstrates how to cast types in HTML.

First method: utilizing interfaces

Create a pipe in Angular

device-type.pipe.ts

@Pipe({
    name: 'isDeviceType'
})
export class IsDeviceTypePipe implements PipeTransform {
    transform(value: DeviceA|DeviceB, expect: 'a' | 'b'): boolean {
        if (expect==='a') return !!(value as DeviceA).attributeA;
        return !!(value as DeviceB).attributeB;
    }
}

Second method: using classes

Create a pipe in Angular

device-type.pipe.ts

@Pipe({
    name: 'isDeviceType'
})
export class IsDeviceTypePipe implements PipeTransform {
    transform(value: DeviceA|DeviceB, expect: 'a' | 'b'): boolean {
        if (expect==='a') return value instanceOf DeviceA;
        return value instanceOf DeviceB;
    }
}

and in your HTML

<div *ngFor="let device of devices">
  <div *ngIf="device | isDeviceType:'a'">
    <span *ngFor="let str of device.attributeA">{{ str }}</span>
  </div>
  <div *ngIf="device | isDeviceType:'b'">
    <span>{{ device.attributeB }}</span>
  </div>
</div>

Review the code:

https://stackblitz.com/edit/angular-xtr54e?file=src/is-device-type.pipe.ts

Answer 2

When TypeScript is compiled, interfaces are lost and become objects, making it impossible to infer class types from interfaces using instanceOf. You can either continue using interfaces and infer types from parameters, or use classes with instanceOf. To implement these operations in HTML with Angular, pipes are used. Check out the examples below and the code here.

The code on StackBlitz demonstrates how to cast types in HTML.

First method: utilizing interfaces

Create a pipe in Angular

device-type.pipe.ts

@Pipe({
    name: 'isDeviceType'
})
export class IsDeviceTypePipe implements PipeTransform {
    transform(value: DeviceA|DeviceB, expect: 'a' | 'b'): boolean {
        if (expect==='a') return !!(value as DeviceA).attributeA;
        return !!(value as DeviceB).attributeB;
    }
}

Second method: using classes

Create a pipe in Angular

device-type.pipe.ts

@Pipe({
    name: 'isDeviceType'
})
export class IsDeviceTypePipe implements PipeTransform {
    transform(value: DeviceA|DeviceB, expect: 'a' | 'b'): boolean {
        if (expect==='a') return value instanceOf DeviceA;
        return value instanceOf DeviceB;
    }
}

and in your HTML

<div *ngFor="let device of devices">
  <div *ngIf="device | isDeviceType:'a'">
    <span *ngFor="let str of device.attributeA">{{ str }}</span>
  </div>
  <div *ngIf="device | isDeviceType:'b'">
    <span>{{ device.attributeB }}</span>
  </div>
</div>

Review the code:

https://stackblitz.com/edit/angular-xtr54e?file=src/is-device-type.pipe.ts

What is the best approach to apply type casting in an *ngFor loop for an array containing a variety of types in Angular?

Answer №1

First method: utilizing interfaces

Second method: using classes

and in your HTML

Review the code:

Similar questions

Attention: issue TS18002 has been detected - The 'files' configuration file is currently blank

Why is it that my service in the Angular project doesn't fetch data after I make changes and reload the page?

Sending data from the LoginComponent to the RootComponent

Definitions for images in the following format

What is the process for generating an injected and a const object instance?

Is there a way to switch (transpose) the rows and columns of a dynamically generated HTML table from Highchair in Angular 12?

SvgIcon is not a recognized element within the JSX syntax

What is the proper way to include special symbols such as "++" and "#" in a request?

The ngOnChanges lifecycle hook is triggered only once upon initial rendering

When working with the Google Sheets API, an error occurred: "this.http.put(...).map is not a valid

Exploring the Power of Asynchronous Operations with Await and Async in

Enhancing IntelliSense to recognize exports specified in package.json

Every time I try to run my Angular app, it crashes. I've already tried reinstalling Node and rebooting

Why is it that my side effect action is unable to identify the return action type property?

Navigating in express

Cease monitoring for operations within NGRX

Is there a method to run code in the parent class right after the child constructor is called in two ES6 Parent-Child classes?

Guide on streamlining interface initialization within a React project using Typescript

Execute the render function of the components that have been passed as

What is the best way to construct an interface in TypeScript with a variable number of properties?