Navigate to Contact record detail page from Account object

Question

I'm trying to navigate to the contact record page from the account object details page.

The scenario is: In the Account object there are multiple contacts available. When I click on any of the contacts, it should open on the Contact object details page. I'm trying it by using Navigation mixin and by passing on the recordId, but it will open on account objects only.

Can any one try to guide me how to do this?!

js:

    import { LightningElement, track, wire, api } from 'lwc';
    import findContacts from '@salesforce/apex/GetContactController.getContacts';
    import { NavigationMixin } from 'lightning/navigation';
    
    const DELAY = 300;
    
    export default class GetContactOnAccount extends NavigationMixin(LightningElement) {
        @track searchKey = '';
        @api recordId;
        
        @wire(findContacts, { searchKey: '$searchKey' })
        contacts;
    
            navigateToNewContactPage() {
                    this[NavigationMixin.Navigate]({
                        type: 'standard__recordRelationshipPage',
                        attributes: {
                            recordId: this.recordId,
                            objectApiName: 'Account',
                            relationshipApiName: 'Contacts',
                            actionName: 'view'
                        },
                    });
        } 
    //connectedCallback function is similar to init method in Lightning Components.
        connectedCallback(){
            this.searchKey = this.recordId;
        } 
    }

Answer 1

You are passing the 'AccountId' from recordId and 'Account' object to the NavigationMixin.

You would need to get the Contact Id you want to navigate and and also use the standard__recordPage since you want to navigate to a record page.

navigateToNewContactPage() {
    this[NavigationMixin.Navigate]({
    type: 'standard__recordPage',
          attributes: {
              recordId: //Use the queried contact Id, if your contacts has it then this.contacts.Id
              objectApiName: 'Contact',
              actionName: 'view'
             },
          });
        }