LWC Lightning Web Component in Record Context(recordId in LWC)

Sample Code:
Example 1:

LWC HTML:

<template>

    <lightning-card>
        {recordId}
    </lightning-card>
   
</template>

LWC JavaScript: 

import { LightningElement, api } from 'lwc';

export default class RecordPage extends LightningElement {

    @api recordId;
   
}

LWC js-meta.xml: 

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed> 
    <targets> 
        <target>lightning__RecordPage</target> 
    </targets> 
</LightningComponentBundle>  


Output: 

 


Example 2: LWC HTML:

1. <template>  
2.   
3.     <lightning-card  title="Case Mini View">  
4.         <lightning-record-view-form record-id={recordId}    
5.                                     object-api-name="Case">    
6.             <div class="slds-grid slds-wrap">    
7.                 <div class="slds-col slds-size_1-of-2">                                
8.                     <lightning-output-field field-name="Subject">    
9.                     </lightning-output-field>    
10.                 </div>    
11.                 <div class="slds-col slds-size_1-of-2">    
12.                     <lightning-output-field field-name="Status">    
13.                     </lightning-output-field>    
14.                 </div>    
15.                 <div class="slds-col slds-size_1-of-2">                                
16.                     <lightning-output-field field-name="Reason">    
17.                     </lightning-output-field>    
18.                 </div>    
19.                 <div class="slds-col slds-size_1-of-2">    
20.                     <lightning-output-field field-name="Origin">    
21.                     </lightning-output-field>    
22.                 </div>    
23.             </div>    
24.         </lightning-record-view-form>  
25.     </lightning-card>  
26.   
27. </template> 

LWC JavaScript:

1. import { LightningElement, api } from 'lwc';  
2.   
3. export default class CaseMiniView extends LightningElement {  
4.   
5.     @api recordId;  
6.       
7. } 

LWC js-meta.xml:

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">  
3.     <apiVersion>48.0</apiVersion>  
4.     <isExposed>true</isExposed>  
5.     <targets>  
6.         <target>lightning__RecordPage</target>  
7.     </targets>  
8. </LightningComponentBundle> 

Output: