Make a Component Aware of Its Record Context
If a component with a recordId property is used on a Lightning record page, the page sets the property to the ID of the current record.
In the component’s JavaScript class, use the @api decorator to create a public recordId property.
When your component is invoked in a record context in Lightning Experience or in the mobile app, recordId is set to the 18-character ID of the record, for example: 001xx000003DGSWAA4.
The recordId is set automatically only when you place or invoke the component in an explicit record context. In all other cases, the recordId isn’t set, and your component can’t depend on it. You can set the recordId yourself in such cases. For example, components used for quick actions can explicitly set the recordId if they need access to the record ID when used on a record page.
Experience Builder sites don’t automatically bind recordId to a component’s template.
To achieve that goal with your component, add recordId in an expression in the component’s *.js-meta.xml file. All the page types specified in the targets parameter have access to the record ID.
When your component is invoked in a record context in an Experience Builder site, the expression "{!recordId}" is set to the 18-character ID of the record.
See Also