How to get recordid in community page using LWC [closed]

Question

mymodal.html

<template>
  <lightning-modal-header label="My Modal Heading"></lightning-modal-header>
    <lightning-modal-body> Content: {recordId} 
      console.log(recordId)

      <lightning-record-edit-form
        record-id={content}
        object-api-name="Account">

        <div class="slds-box">
            <lightning-input-field field-name="Name"> </lightning-input-field> 
            <lightning-input-field field-name="Phone"> </lightning-input-field>              
        </div>
        <lightning-button class="slds-m-top_small" variant="brand" type="submit" name="update" label="Update">
        </lightning-button>
    </lightning-record-edit-form>
    </lightning-modal-body>
    <lightning-modal-footer>
        <lightning-button label="OK" onclick={handleOkay}></lightning-button>
    </lightning-modal-footer>
</template>

myModel.js

import { api } from 'lwc';
import LightningModal from 'lightning/modal';

export default class MyModal extends LightningModal {
    @api content;
    @api recordId;
    @api content2;

    handleOkay() {
        this.close('okay');
    }
}

myPage.html

<template>
    <lightning-button
        onclick={handleClick}
        aria-haspopup="modal"
        label="Open My Modal">
    </lightning-button> 
    <p>Result: {result}</p>
</template>

mypage.js

import { LightningElement, api } from "lwc";
import NAME_FIELD from '@salesforce/schema/Account.Name';
import MyModal from "c/myModal";

export default class MyPage extends LightningElement {
    nameField = NAME_FIELD;
   

    // Flexipage provides recordId and objectApiName
    @api recordId;
    
    @api objectApiName;
    async handleClick() {
        console.log(this.recordId+ ' recordId');
        // console.log(this.nameField+ ' nameField');
        // console.log(this.currentPageReference.state.recId);
        const result = await MyModal.open({
            size: 'large',
            description: 'Accessible description of modal\'s purpose',
            content: this.recordId,

          //  content2: this.recordId,

           
        });
        // if modal closed with X button, promise returns result = 'undefined'
        // if modal closed with OK button, promise returns result = 'okay'
        console.log(result);
    }
}

My output

Answer 1

You are very close, you just need to update your XML file like this -

It'll work only if you add the component to the Record Detail page on the community.

    <targets>
            <target>lightningCommunity__Page</target>
            <target>lightningCommunity__Default</target>
        </targets>
        <targetConfigs>
            <targetConfig targets="lightningCommunity__Default">
                <property name="recordId" type="String" label="Record ID" description="Should be set to {!recordId}" default="{!recordId}"/>
<!-- this will create a property on the community page-->
            </targetConfig>
        </targetConfigs>