Download as docx, pdf, or txt
Download as docx, pdf, or txt
You are on page 1of 2

Public Property(wire)

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

Default Slot: in default slot we do need to enter any name of slot, it


will be maximum for a child component.

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

CreateRecord Method from LDS allow us to insert a record without the


need of server side controller. CreateRecord method is promise so on
successfull insertion we will get response in then keyword else error
method we will get in catch. The promise object represents the eventual
completion(or failure) of an asynchronus operation, and its resulting
value.

Private properties are non-reactive in nature, which means they do not


create data binding and does not update template on their value change.

getRecord wire adaptor retrive the record from salesforce without the
need of salesforce controller.
Syntax
@wire(getRecord, {recordId: `$recordId`, fieldArray})
accountRecord;

Reason of using $recordId in place of this.recordId is when value change


in recordId than it will call data from server, if we use this.record than
on change of recordId value it will not call from server.

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.

You might also like