Salesforce4U

There are 3 phase of LWC component  1. Mounting  A. constructor, B. connnectedCallback C. render D. renderedCallback 2. UnMounting  A. disconnectedcallback 3. Error  A.errorcallback Note - render is not lifecycle hook, it is protected method of Lightning element class. Mounting Phase LWC Creation and Render Life cycle Constructor Method ·        This method called when component is instantiated and It flows from parent to child component. ·        Need to call Super() inside constructor method ·        Can’t access any component properties or child component because it’s not ready yet. ·        Host element can be accessed through “this. template” inside constructor method. ·        Don’t add any attributes to host inside constructor C   constructor (){          super (); //...

We can not straight forward map relationship filed from apex to LWC data table. When we get query results related object information comes  as different object itself. So we need to traverse the query results and map the way we want to. Hers is your controller method @AuraEnabled (cacheable= true )      public   static   List < Associated_Healthcare_Center__c > getAssociatedFacility( Id  sLeadId, Id  sAccountId){              return  [ SELECT  id, Signature_Healthcare_Center__c , Signature_Healthcare_Center__r .phone__c,                   Signature_Healthcare_Center__r . Facility_Short_Name__c ,                   Signature_Healthcare_Center__r . Admission_Director__r . Name     ...

 Following are the ways we can apply in CSS in LWC. 1. Inline CCS Inline CSS is not recommended approaches, it is take highest priority among all CSS. style="color:green;font-size:10px;" is inline CSS added to div < template >     < lightning-card title = "Inline CSS" >         < div >             < div style = "color:green;font-size:10px;" > This is inline Style div </ div >         </ div >     </ lightning-card > </ template >  2. External CSS style can be applied to an elements such as h1, p,div span etc. It can applied to class using "." notation. for example .user{} It can also be applied to pseudo class.  for example .user:hover{} Id locator is not being used in LWC to apply style To apply external css, need to create separate CSS file, file name should be exactly matched with component name. for example - If component name is ...

 To access elements rendered by component we need to use template property. Access element from tag. <h1>Element Inside H1 Tag </h1> const h1Element = this.template.querySelector('h1'); Console.log(h1Element.innerText ); // It will print "Element Inside H1 Tag" We can apply style sheet after getting DOM element dynamically.  h1Element.style = 'color:red;border-style: solid;' Accessing element using class. const userElements =  this.template.querySelectorAll('.name'); It will return node list (multiple items that is why  querySelectorAll is being used.) We can set attributes to each element of node list dynamically or apply style sheet. Array . from ( userElements ). forEach ( item => {             console . log ( item . innerText );             item . setAttribute ( 'title' , item . innerText );               item.style = ' background-color :  ...

 What is DOM ? DOM - Document Object Model is a programming API for HTML or XML component, It defines logical structure of documents and the way document is accessed and manipulated. Basically the DOM is tree structure representation of web page. What is Shadow DOM ? Shadow DOM brings encapsulation concept to DOM. It enables to link hidden separate DOM to an element. Benefits: DOM query, CCS rules and event propagation does not cross shadow boundary, hence creating encapsulation. Basically when we try fetch all the DOM using query selectors, we will not get DOM elements for child component in parent component. When we apply style sheet to DOM of parent component, there will be no impact to child component DOM. Event propagation will not work from child to parent or vice versa by default.  How to attach shadow DOM to element ? <script>     const element = docuement.queryselector('#elementId');     const shadowRoot = element. attachShadow ({mode:'open'}...

 Adding one LWC component within body of another LWC component  is known as component composition. It allows building complex component from simper building block component. How to refer child component from parent component ? 1. childComponent            <c-child-component></c-child-component> 2. childComponentDemo        <c-child-component-demo></c-child-component-demo> 3. childComponentLWC          <c-child-component-l-w-c></c-child-component-l-w-c> This naming convection known as kebab case. Replace capital letter with small and prefixed with hypen. Advantages - Defining smaller component will make testing easy and reusability. 

 There are 2 types of template looping in LWC 1. for:each 2. iterator For Each < template for:each = {array} for:item = "currentItem" for:index = "index" > // we can add repeatable components </ template > Note-  1. for:each attribute take array as input 2. for item represent the current item of the loop, currentItem is the alias name, we can name to anything. 3. for:index holds index of current element of an array. Importance of Key attribute in Template loop Key is a special string/integer attribute required to be included to first element inside template when creating list of elements. Key help LWC engine to identify which items added,removed or modified. Key must be string or integer, It cant be object. Array Index cant be defined as key. < template >     < lightning-card title = "Best Companies" >         < div class = "slds-m-around_medium" >             < template for:each...

 There are 2 special directive which is being used for conditional rendering of DOM element.   1.  if:true    2. if:false  <template if:true={expression}>     Render when expression is true  </template>     <template if:false={expression}>     Render when expression is false  </template> Notes -  1. Expression can be JavaScript property 2. Can be property of an object defined in JavaScript. example {employee.name} 3. Ternary operator can not be used inside expression. 4. Array also can not be used in the expression. 5. To use computed value use getters.  Here is component code which have if-true if-false also computed expression in if-directive. < template >     < lightning-card title = "Conditional Rendering" >         < div class = "slds-m-around_medium" >             < lightning-button   ...