Get Current Record Id in Lightning Web Component

Hello friends, In this post, we are going to learn, how to get current record id in lightning web component (LWC). Many of our friends are don't know about this process, so let's understand this with a simple code example.

Get current record id in lightning web component

To get the current record ID in LWC, we just need to import the api decorator from lwc module. Then, we have to declare the property recordId with @api decorator. This recordId property will have the record ID of the current record.

Example:

CurrentRecordId.html

 <template>
    <lightning-card title="Lightning Web Component">
        <div class="slds-p-around_small">
            Current Record Id in Lightning Web Component: <strong>{recordId}</strong>
        </div>
    </lightning-card>
 </template>

CurrentRecordId.js

 import { LightningElement,api } from 'lwc';
 export default class CurrentRecordId extends LightningElement {
    @api recordId;
 }

CurrentRecordId.js-meta.xml

 <?xml version="1.0" encoding="UTF-8"?>
 <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
        <target>lightning__RecordAction</target> 
    </targets>
    <targetConfigs>
       <targetConfig targets="lightning__RecordAction">
           <actionType>ScreenAction</actionType>
       </targetConfig>
        </targetConfigs>
 </LightningComponentBundle>

Output:

Hope you like this post, for any feedback or suggestions please feel free to comment. I would appreciate your feedback and suggestions.
Thank you.