How can I pass TypeScript interfaces to an Input?

Question

If I have the following interface:

/** carddetail.ts */
export interface CardDetail {
   name: string;
   type: string;
   logo?: string;

How can I make sure @Input() decorators accept this type of data?

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

@Input cardDetail: CardDetail
export class CardComponent {
}

This gives me the error: 'CardDetail' only refers to a type, but is being used as a value here.ts(2693)

Is there some other approach to use? In my parent class I define a

carddetails = CardDetail[]

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

and pass those values in an *ngFor in the template

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

Answer 1

@Input should be inside component class.Also you will need to add () after @Input so it should be

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

instead of

@Input cardDetail: CardDetail
export class CardComponent {
}

also from your parent class it seems like you are passing an array if so,then it should become

@Input() cardDetail: CardDetail[];