How to track down a bug in an angular project?

Question

Angular

I want to display a list of elements (gallery cards with different titles).
Accordingly, for this:
I created the user component, defined a template for it and an input variable
from the app component in the loop, display my cards,
entered the chrome dev tools console variable: user.name = undefined
Cards are displayed, but titles are not.
1) Can someone tell me what is wrong?
2) how to track using the console in which file it is localized?
*--------------app.component.ts————————*

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

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html'

})

export class AppComponent {

  users = [

    {name: 'title 1'},

    {name: 'title 2'},

    {name: 'title 3'}

  ]

}

*--------------user.component.html————————*

<div>
  <div>
     <div>
          <span>{{ user.name }}</span>
       </div>
  </div>
</div>

*--------------user.component.ts————————*

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

@Component({

  selector: 'app-user',

  templateUrl: './user.component.html',

  styleUrls: ['./user.component.scss']

})

export class UserComponent{
  @Input() user;
}

*--------------app.component.html————————*

<div>
  <div>
     <app-user *ngFor="let u of users">
          [user]="u"
      </app-user>
   </div>
</div>
</pre>

Here's a link to the project just in case.

Answer 1

You:
Need:
And best of all, let's understand the names:
Working example - link