Angular Type 'string' is not assignable to type 'Number' ...but it never is a string

Issue

views is the property with the issue

Here is the template of the child component (being iterated over)

mnemonicCard.html

<ion-card>
  <ion-card-title>{{name}}</ion-card-title>
    <ion-icon name="eye">{{views}}</ion-icon>
</ion-card>

and here is the code:

@Component({
    selector:'app-mnemonicCard',
    standalone:true,
    templateUrl:"./mnemonicCard.html",
    imports:[
        IonicModule,
        CommonModule
    ]
})
export class MnemonicCard {
    @Input() name: String = '';
    @Input() views: Number = 0;
}

export interface Mnemonic{
    link: String
    name: String
    stars: Number
    views: Number
    globalViewRank: Number
    globalStarRank: Number
    collectionViewRank?: Number
    collectionStarRank?: Number
}

The message points to the template of the parent component SingleCollectionPage.

line 21 view={{m.views}}

That section looks like this:

<ion-content [fullscreen]="true">
  <app-mnemonicCard *ngFor="let m of this.collection.mnemonics"
  name={{m.name}}
  views={{m.views}}
  ></app-mnemonicCard>
</ion-content>

and the parent component's code:

export class SingleCollectionPage{
    @Input() id = '' 
    collection: Collection = {id: '1', name: 'Loading...'}
    constructor(private collectionService: CollectionService) {
    }

    ngOnInit(){
        console.log('input', this.id)
        this.collectionService.getCollectionByID(this.id, true).then(c => {
            
            this.collection = c;
            console.log(this.collection)  //Yep these show as numbers in the console
  
    })
}
}

export interface Collection {
    id: string,
    name: string,
    mnemonicCount?: number,
    mnemonics?: Array<Mnemonic>
}

The collection has an Array, and Mnemonic's views property is a Number! So WTF is going on???

export interface Mnemonic{
    link: String
    name: String
    stars: Number
    views: Number
    globalViewRank: Number
    globalStarRank: Number
    collectionViewRank?: Number
    collectionStarRank?: Number
}

Even my Intellisense thinks that both sides are Numbers

Solution

A couple of observations that potentially could fix your problem.

When you reference a variable from your typescript component to its template HTML, you do it without using this, so in this case, it would be ngFor="... of collection.mnemonics".

When you bind data to your own component attributes or HTML attributes, you should do it using property binding rather than string interpolation, Property binding is typically used when you want to set an element's property dynamically based on the component's data or logic. Given your code, it should be:

<app-mnemonicCard *ngFor="let mnemonic of collection.mnemonics"
  [name]="mnemonic.name" 
  [views]="mnemonic.views"
></app-mnemonicCard

When you create your own data types with interfaces, you should use the primitive values rather than the wrapper type, so number/string/boolean are recommended

export interface Collection {
 id: string;
 name: string;
 mnemonicCount?: number;
 mnemonics?: Mnemonic[]; // this is another way of declaring an array, with []
}

Answered By - Andres2142