core.js:5980 ERROR TypeError: Cannot read property 'Name' of undefined (angular)

I can't generate card with information in angular

my model:

export class order {
    Name!: string
    Surname!: string
    Email!: string
    Type!: string
    Description!: string

    constructor(name: string, surname: string, email: string, type: string, desc: string) {
        this.Name = name,
            this.Surname = surname,
            this.Email = email,
            this.Type = type,
            this.Description = desc
    }
}

card component typescript:

import { Component, Input, OnInit } from '@angular/core';
import { order } from 'src/app/shared models/order.model';

@Component({
  selector: 'app-contact-card',
  templateUrl: './contact-card.component.html',
  styleUrls: ['./contact-card.component.css']
})
export class ContactCardComponent implements OnInit {
  @Input()
  item!: order;
  constructor() { }

  ngOnInit(): void {
  }

}

card component html:

<div class="card">
    <h3>{{item.Name}} {{item.Surname}}</h3>
    <div class="flex">
        <p>{{item.Email}}</p>
        <p>{{item.Type}}</p>
    </div>
    <p>{{item.Description}}</p>
</div>

It says that the error is on my html when I interpolate string

Please check the value of item. It is probably null or undefined and that's why this error occurs. In order to avoid this error, please try the following:

<div class="card">
    <h3>{{item?.Name}} {{item?.Surname}}</h3>
    <div class="flex">
        <p>{{item?.Email}}</p>
        <p>{{item?.Type}}</p>
    </div>
    <p>{{item?.Description}}</p>
</div>

Read Safe navigation operator (?.) or (!.) and null property paths for more details.