Angular - How ngFor works?

Question

I want to refacto my code. I have this ngFor in my section-portrait.component.html

<app-portrait *ngFor="let model of models"
      [firstName]="model.firstName"
      [lastName]="model.lastName"
    ></app-portrait>

Here is my portrait.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-portrait',
  templateUrl: './portrait.component.html',
  styleUrls: ['./portrait.component.scss']
})
export class PortraitComponent implements OnInit {
  firstName: string;
  lastName: string;

  constructor() {
  }

  ngOnInit() {
  }
}

And my portrait.component.html

<h4>
  <a href="#">{{ firstName }} {{ lastName }}</a>
</h4>

I want to loop on every Model to display there firstName and lastName

And I have this error:

Uncaught Error: Template parse errors: Can't bind to 'firstName' since it isn't a known property of 'app-portrait'.

What did I do wrong?

Answer 1

There's nothing wrong with your ngFor. Congratulations!

However, your Component's properties are specified incorrectly. If you want to inject them with values from your HTML, you'll need to expose them through @Input.

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-portrait',
  templateUrl: './portrait.component.html',
  styleUrls: ['./portrait.component.scss']
})
export class PortraitComponent implements OnInit {
  @Input() firstName: string;
  @Input() lastName: string;

  constructor() {
  }

  ngOnInit() {
  }
}

If you wanted, you might be interested in going one step further:

@Input() model: Model;

<app-portrait *ngFor="let model of models" [model]="model"></app-portrait>