Angular Firestore - Display the data of the document id (View Contact

Question

How can I display all the data on document, i got the id but i cant display the data

this is the service:

 getContact(){
  return this.firestore.doc('contact').get()

 }

this is the view-contact component:

  



export class ViewContactComponent implements OnInit {

 
  // Observable which will hold an array of Article
  // contacts$: Observable<IContact[]>;

  // @Input() contact: IContact 

  contact:IContact
  id: String;
  

  constructor(private route: ActivatedRoute,
    private contactService: ContactService,private firestore: AngularFirestore) { 
    }

  ngOnInit(): void {
   
      // query Firestore using 'id' when page loads
      //  this.firestore.doc('contact/' + this.id).valueChanges();
      const id = this.route.snapshot.paramMap.get('id');

    this.contactService.getContact(id).subscribe(contact => {
      this.contact = contact
     
    });
    
    
    

      console.log(id)
  }
  
}

this is the model

export default interface IContact{
    id:string | null,
    name:string,
    email:string,
    phoneNumber:string
}

and this is the view contact template where it needs to be display, i also included the id on routing

 <div *ngIf="contact" class="card shadow-sm p-3 mb-5 bg-body " style="width: 18rem;">
            <div class="card-body">
                <p  class="text-justify">
                    <b>Name:{{contact.name}}</b><br>
                    <b>Email:{{contact.email}}</b><br>
                    <b>Contact Number:</b><br>
                </p>
            </div>
        </div>