Target DI 1

TargetDI.js

// html file 
<template>
    <lightning-card  variant="Narrow"  title="Target Component" icon-name="standard:account">
      <!-- sfdcboy -->
        <div if:false = {recordId}>
            Nothing Selected
        </div>
        <div if:true={recordId}> 
        <lightning-record-form
           record-id={recordId}
           object-api-name="Contact"
           layout-type="Compact"
           mode="view">
        </lightning-record-form>
    </div>
    </lightning-card>
</template>
// html end 

// js start
import { LightningElement,api } from 'lwc';
export default class TargetDI extends LightningElement {
    @api recordId;
}
// js end
// xml start
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>54.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__AppPage">
            <property name = "recordId" type="String" label ="Contact Id"></property>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

// xml end