Professional Documents
Culture Documents
Public Property (Wire) : Parent Component
Public Property (Wire) : Parent Component
When we use api decorator on a property than that property will be Public property, These are
declared in child component and value can be supplied from parent component.
A component that declare public property can set only its default value and can not modify it later
on. Public property’s value should come from parent component.
Public Property are reactive, updating a new value in parent component, automatically update the
child component.
Public Boolean property setup in child document as false by default and than from parent category
we send true. Setting show-room-info = false evaluates to true, only way to specify the false in
markup is omit the Boolean attribute.
Track Property
When we use track decorator on a property than that property will be reactive property ie when we
make any changes in property at js file than it will reflect at html.
Kabab Case
When we use lightening web component inside other components, use kebab-case instead of
camelcase.
Slot
Slots are used to transfer markup from parent component to child component. There are two type
of slots in lwc.
Default Slot
Named Slot
Parent Component
<!-- slotWrapper.html -->
<template>
<c-slot-demo>
<p>content from parent</p>
</c-slot-demo>
</template>
Child Component
<div>
<slot>
<p>content from parent</p>
</slot>
</div>
Named Slot: In named slot, we can pass any number of slot, in named slot we
need to pass the name of slot and in child we will enter slot name in slot
attribute.
Parent Component
<!-- slotWrapper.html -->
<!-- slotsWrapper.html -->
<template>
<c-named-slots>
// Named slot
<span slot="firstName">Willy</span>
<span slot="lastName">Wonka</span>
// default Slot
<span>Chocolatier</span>
</c-named-slots>
</template>
Child Component
<!-- namedSlots.html -->
<template>
// Named slot
<p>First Name: <slot name="firstName">Default first name</slot></p>
<p>Last Name: <slot name="lastName">Default last name</slot></p>
// Default slot
<p>Description: <slot>Default description</slot></p>
</template>
WIRE
getRecord wire adaptor retrive the record from salesforce without the
need of salesforce controller.
Syntax
@wire(getRecord, {recordId: `$recordId`, fieldArray})
accountRecord;
The $ means that the value is passed dynamically, when the value changes,
the wire service provisions data and the component re-renders.
Wired Properties are reactive like tracked properties, and rerendered the
template when the property value changes.