Angular TS2322: Type 'string' is not assignable to type 'IHamster[]'

Question

i have some problems with my code, it looks like a simple one. Type string is not assignable to type Hamster[], but I can't find the issue 😞.

I can pass value to the child, but if I use the array of IHamster, I get this error. Hope someone can help me.

And sorry for the quality of question, its my first first post 🤖

MAIN

import { IHamster } from './ihamster';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title: string = "refresher"
  hamsters: IHamster[] = [
    {
      img: "https://images.unsplash.com/photo-1533152162573-93ad94eb20f6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80", 
      alias: "Mr. Hamster",
      name: "Hamsterz",
      bio: "I am here to find some friends!"
    },
    {
      img: "https://images.unsplash.com/photo-1625406736528-42c8d985a072?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80",
      alias: "Mrs. Hamster",
      name: "Hammine",
      bio: "I am here to see what my husband does here!"
    },
    {
      img: "https://images.unsplash.com/photo-1621668590468-828e1344466b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80",
      alias: "Bob",
      name: "Hon Hamo",
      bio: "I am here to hack ervery body ervery were, i got the red pill!"
    },
    {
      img: "https://images.unsplash.com/photo-1618232118117-98d49b20e2f5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80",
      alias: "Charles",
      name: "Chano Chai",
      bio: "Give me some food, or you get the foo!"
    },
    {
      img: "https://images.unsplash.com/photo-1584553391899-7b5b3287c66d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80",
      alias: "vicky",
      name: "Victoria Nul",
      bio: "knock, knock - lets take the rock!"
    },
    {
      img: "https://images.unsplash.com/photo-1636725360313-d37f4a232cfa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2679&q=80",
      alias: "Mixxy",
      name: "Luna Lu",
      bio: "I am just a beauty 🥰"
    }
  ]; 
  
}

Here is -> hamsters marked <-

<main>

  <div class="hamster-card_container">
    <app-hamster-card *ngFor="let hamster of hamsters"
      img={{hamster.img}}
      alias={{hamster.alias}}
      name={{hamster.name}}
      bio={{hamster.bio}}>
    </app-hamster-card>
  </div>

  <app-proposals 
    title={{title}}
    hamsters={{hamsters}}>
  </app-proposals>

</main>

CHILD

import { IHamster } from '../ihamster';

@Component({
  selector: 'app-proposals',
  templateUrl: './proposals.component.html',
  styleUrls: ['./proposals.component.scss']
})
export class ProposalsComponent implements OnInit {
  @Input() hamsters: IHamster[] = [];
  @Input() title: string = "";
  number: number = Math.floor(Math.random() * this.hamsters.length) + 1; 

  constructor() {
  }

  ngOnInit(): void {
  }

}

The title is passed successfully.

<div class="proposals-container">
  <p>{{title}}</p>
  <!-- <ng-component *ngFor="let hamster of hamsters; let i = index">
    <ng-component *ngIf="(i +1) % number == 0">
      <app-proposals-profile
      
      >
      </app-proposals-profile>
    </ng-component>
  </ng-component> -->
  
</div>

I got the Error: Error: src/app/app.component.html:15:5 - error TS2322: Type 'string' is not assignable to type 'IHamster[]'.

15 hamsters={{hamsters}}> ~~~~~~~~

src/app/app.component.ts:6:16 6 templateUrl: './app.component.html', ~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component AppComponent.

✖ Failed to compile.

Answer 1

This might help. If you want to pass argument, you need to use [] to mark that value that you passing though is variable and not a string.

<app-proposals title={{title}} [hamsters]="hamsters"></app-proposals>