What is the best way to assign TypeScript interfaces to an Input field?

Question

Suppose I have the following interface CardDetail:

export interface CardDetail {
   name: string;
   type: string;
   logo?: string;

What is the correct way to ensure that the @Input() decorators accept this type of data?

import { CardDetail } from '../card-detail'

@Input cardDetail: CardDetail
export class CardComponent {
}

When trying to implement this, I encounter the error: 'CardDetail' only refers to a type, but is being used as a value here.ts(2693)

Is there an alternative approach I can take? In my parent class, I specify:

carddetails = CardDetail[]

constructor() {
 this.carddetails = [
      { name: "foo", logoUrl:'/assets/foo.png', type: "bar" } 
      ...
 ]

and pass these values in an *ngFor loop in the template

<ng-template *ngFor="let cardDetail of carddetails">
    <app-card [cardDetail]="cardDetail"></app-card>
</ng-template>

Answer 1

Answer №1

@Input needs to be properly placed within the component class. Don't forget to include () after @Input. Your code should look like this:

export class CardComponent {
   @Input() cardDetail: CardDetail
}

Instead of:

@Input cardDetail: CardDetail
export class CardComponent {
}

If you are passing an array from the parent class, then make sure to adjust your code as follows:

@Input() cardDetail: CardDetail[];

Answer 2

@Input needs to be properly placed within the component class. Don't forget to include () after @Input. Your code should look like this:

export class CardComponent {
   @Input() cardDetail: CardDetail
}

Instead of:

@Input cardDetail: CardDetail
export class CardComponent {
}

If you are passing an array from the parent class, then make sure to adjust your code as follows:

@Input() cardDetail: CardDetail[];