I am new to Lightning Web Components. I have made a component that searches contacts. I displayed recordId, name and email of the contacts. I have placed the component on the lead record page. I want to navigate to a particular contact by clicking on it from the result obtained.

I prepared a lightning card for each displayed contact and implemented an onClick method. In onclick method, I used this.recordId for navigation. It's taking me to the lead record page again. How can I use the contactId to navigate to the contact record page by clicking on the respective card? I searched for solution but didn't find any.

Search Contacts

Apex Method:

        public static list<sObject> getContactList(String name){
            String key = '%'+name+'%';
            String query = 'Select Id,Name,Email,Phone From Contact Where Name LIKE :key LIMIT 10';
            return Database.query(query);

HTML File:

            <lightning-card >
                    <div class="slds-m-around_medium"><h1>Search Contacts(communicate with apex)</h1></div>
                    <div class="slds-m-around_medium">
                        <lightning-input  label="Find Contact" value={searchKey} onchange={handleChange} class="slds-m-bottom_small">
                        <template for:each={contacts} for:item="contact">                   
                            <lightning-layout-item key={contact.key}>
                                <lightning-card onclick={navigateToContact} variant="narrow">
                                    <c-contact-card slot="footer" key={contact.id} contact1={contact} ></c-contact-card>
                                    <!-- the above component is used for printing id, name and email -->

JS Function:

    navigateToContact() {
        // View a custom object record.
            type: 'standard__recordPage',
            attributes: {
                recordId: this.recordId,
                objectApiName: 'contact', // objectApiName is optional
                actionName: 'view'

1 Answer 1


There is a similar question being answered on this link with the answers : Lightning Web Component - Navigation - Show Link in a List / Table to Open Record.

My recommended solution is to create a component just to display the link then it can be used globally for any object. For your case you can do :

<c-navigation-link label="View Contact" label ="" title=""                      
    type="standard__recordPage" record-id="Contact.Id">
  • I used a button <lightning-button key={contact.Id} label={contact.Name} title="View Contact" onclick={navigateToContact} value={contact.Id}></lightning-button> and changed JS to recordId: event.target.value, It works! But following change does not work <lightning-card key={contact.Id} value={contact.Id} onclick={navigateToContact}> It gives "Page Does Not Exist" error
    – Koustubh
    Oct 18, 2019 at 7:46
  • Try with a hardcoded contact record id first to see if it is working. And I think you are missing <template for:each={contacts.data} for:item="contact">
    – compski
    Oct 18, 2019 at 8:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.