What is causing error while refactoring angular application into subcomponent?

I am getting following error in student-item.component.html file while I was trying to refactor app component into student-item component.

Error:

Property 'student' does not exist on type 'StudentItemComponent'.ngtsc(2339)
student-item.component.ts(3, 23): Error occurs in the template of component StudentItemComponent

Am I missing something here?

Following is code snippets from different relevant files.

student-itemp.component.html (In this file I am getting error).

<p>{{student.name}}</p>
<p>{{student.class}}</p>
<p>{{student.dob}}</p>

app.component.html

<div class="record" *ngFor="let student of students"
           (click) = selectStudent(student) 
           [style.backgroundColor] = "student.highlight ? '#afa' : '#fff'">
      <app-student-item [student]="student"></app-student-item>
      
  </div >

student-item.component.ts

@Component({
  selector: 'app-student-item',
  standalone: true,
  imports: [],
  templateUrl: './student-item.component.html',
  styleUrl: './student-item.component.css',
  inputs: ['student']
})

export class StudentItemComponent {
}

NOTE: I was trying this example from LinkedIn Learning’s "Learning Angular" course.

.

>Solution :

You’ve set the input but it is not linked to a property in the component, add the property:

@Component({
  selector: 'app-student-item',
  standalone: true,
  imports: [],
  templateUrl: './student-item.component.html',
  styleUrl: './student-item.component.css',
  inputs: ['student']
})

export class StudentItemComponent {
  student;
}

But it’s not following angular rules to declare inputs:
Use @Input rather than the inputs metadata property (https://angular.dev/style-guide#style-05-12).

You should better do this way:

@Component({
  selector: 'app-student-item',
  standalone: true,
  imports: [],
  templateUrl: './student-item.component.html',
  styleUrl: './student-item.component.css'
})

export class StudentItemComponent {
  @Input() student;
}

Reasons to use this way, as stated in their doc, are:

• It is easier and more readable to identify which properties in a class are inputs or outputs.
• If you ever need to rename the property or event name associated with @Input() or @Output(), you can modify it in a single place.
• The metadata declaration attached to the directive is shorter and thus more readable.
• Placing the decorator on the same line usually makes for shorter code and still easily identifies the property as an input or output. Put it on the line above when doing so is clearly more readable.