1. Get the list of contact ids from flowContainer LWC
2. Create a new account record
3. Query the existing contact records using their ids, create a copy of those, tag them to the new account record and insert them in salesforce
4. Pass the new account record id to flowContainer LWC

• The name should be the name of the variable as defined in our flow. For our entry it's ids as we defined ids variable in the flow which will store the contact ids.
  
• The type is the data type of the variable. In our case it's String (Text in flow)
  
• The value should be the value of the variable defined in our flow. For our scenario, we want to pass the list of contact ids as value to our ids variable. Therefore, we've referred to our contactIds variable here which is defined above in the js and passed that as the value for our ids flow variable.

1. launchFlow(): This method will be called when we click Duplicate Contacts button in our HTML. It'll set showFlow attribute to true which will automatically hide the button and will show the screen flow in our LWC. In a way we can say, this method is used to launch our screen flow.
   
   
2. handleStatusChange(event): This method will be called whenever the flow status is updated. It's binded to statuschange event of our lightning-flow component. Inside this method, we need to check: If the flow is finished, we need to redirect the user to the detail page of newly created account record. We're receiving event inside this method as a parameter so, we're basically checking here if: event.detail.status === FINISHED i.e. if the flow is finished, we're referring to the outputVariables in our flow using event.detail.outputVariables to get the newly created account record.
   
   Remember that Available for output checkbox which we checked in our NewAccount variable inside the flow? That was marked so that it's value can be accessed outside the flow. Therefore, that variable will be received in the array of our ouputVariables accessed through event.detail.outputVariables.
   
   I'm sharing the NewAccount flow variable below again for your reference:
   
   
   As you can notice, we marked this as Available for output so that we can receive the value of this variable outside the flow i.e. in our case - inside our flowContainer lwc component. If you log event.detail.outputVariables, you'll get an array as shown below:
   
   
   As you can see above, there is only a single entry in this array and that is for our NewAccount variable. It's name property is having a value as NewAccount, it's objectType is Account. This variable is not a collection so isCollection is false. It's coming from flow DuplicateContacts so the flow name is the same and it's dataType is SOBJECT as it stores the value of an sObject record. Moving onto the value property, as we only populated the name of the account while creating the record from flow, it's value is an object having only two properties: Id and Name.
   
   Moving back to our code, we are using find() method to find the outputVariable from our outputVariables array where name = NewAccount. This will return us the first entry of our array. We're storing this in a js variable named accountVariable. Finally, we're accessing this account record's id using accountVariable.value.Id and passing it to our navigateToRecordPage() method which will navigate the current user to the new account's record page.
   
   Note: This is the point where we're receiving data from flow in our LWC component. The variables present in our flow which are marked as available for output, will be received in our LWC component inside outputVariables array under our event.
   
   
3. navigateToRecordPage(recordId): This method is used to navigate the current user to the detail page of the record whose record id is passed as a parameter. This method is called from handleStatusChange() method. We're using NavigationMixin.Navigate to navigate to the standard record page and we're passing recordId as the value to our recordId attribute.

1. constructor()
   
   
2. connectedCallback()
   
   
3. renderedCallback()
   
   
4. disconnectedCallback()
   
   
5. errorCallback()

1. constructor() called on parent
2. connectedCallback() called on parent
3. constructor() called on child
4. connectedCallback() called on child
5. renderedCallback() called on child
6. renderedCallback() called on parent

1. constructor() called on parent
2. connectedCallback() called on parent
3. constructor() called on child
4. connectedCallback() called on child
5. errorCallback() called on parent
6. renderedCallback() called on child
7. renderedCallback() called on parent

1. You cannot access public properties (i.e. the properties annotated with @api) within a component's constructor. If you try to refer anything, it'll come as undefined
   
   
2. You cannot access any html tag/element inside the component's constructor as the component is not rendered yet.
   
   
3. You can access private properties of a component inside a constructor

1. connectedCallback() on the parent component will be called before connectedCallback() on the child component is called. This is the reason that you cannot access child components from connectedCallback() of parent, as the child components are not inserted into the dom yet
   
   
2. This callback is invoked after all the public properties are set. This means that whatever initial values are being passed to the public properties of component, the component will have those values assigned when the connectedCallback() is called
   
   
3. This also means that connectedCallback() can only access the INITIAL VALUES OF PUBLIC PROPERTIES i.e. if you're updating the public property after the component is inserted, connectedCallback() will not be called again with the new value of public property. So, if you've a method which should be called based on the value of public property, it's better to call that method in a setter instead of connectedCallback() as the setter will be called again and again whenever the value of public property is set/updated
   
   
4. You can perform some initialization tasks in the connectedCallback() like: listening for events or getting some initial data from the server
   
   
5. connectedCallback() can be called more than 1 time as well. An example scenario can be: when a component is removed from the DOM and inserted again
   
   

<template>
    <c-child message="hello"></c-child>
</template>

1. error: This is the JavaScript native error object. It's the error which was thrown by component where it occured. In our case it'll be the error object we're throwing which is having two properties: code and message.
   
   
2. stack: This is a string specifying - in which component the error occured. It'll show path from the component whose errorCallback() was called till the child component where error was thrown
   

1. Only the parent errorCallback() is called and not the errorCallback() present in the child lwc
   
   
2. Error object is received in the errorCallback() which is exactly the same as thrown by the child lwc. The stack string received in the errorCallback() is showing the stack/path from the parent lwc (the component whose errorCallback() is called) to child lwc (where the error was thrown) as: <c-parent> <c-child>
   
   
3. I am trying to display a reference to child lwc in the errorCallback() as well and it's working fine. This means that once the child lwc is connected to the DOM it can be referred in any of the callback methods be it errorCallback() or renderedCallback()

1. Parent: constructor() called
   
   
2. Parent: connectedCallback() called (reference to child lwc is null)
   
   
3. Child: constructor() called (count is coming as 0, message as undefined and reference to lightning-button is coming as null)
   
   
4. Child: connectedCallback() called (count is coming as 0, message as hello and reference to lightning-button is still null as lightning-button is not connected to DOM yet). This callback method is also throwing error now
   
   
5. Parent: errorCallback() called (child lwc can now be referenced as it's now connected to DOM)
   
   
6. Child: renderedCallback() called (reference to lightning-button is coming properly now as lightning-button is now connected to DOM)
   
   
7. Parent: renderedCallback() called (child lwc can now be referenced here as well because it's now connected to DOM)

Tutorial Video

Child LWC

child.html

<template>
    <lightning-button label="Increase Count" onclick={increaseCount}></lightning-button>
</template>

child.js

import { LightningElement } from 'lwc';

export default class Child extends LightningElement {

    count = 0;

    increaseCount() {
        this.dispatchEvent(new CustomEvent('increasecount', {
            detail: {
                message: 'Increased count to ' + (++this.count)
            }
        }));
    }
}

Parent LWC

parent.html

<template>
    <lightning-card title={message}>
        <p class="slds-var-p-around_small">
            <c-child onincreasecount={updateMessage}></c-child>
        </p>
    </lightning-card>
</template>

parent.js

import { LightningElement } from 'lwc';

export default class Parent extends LightningElement {

    message = 'Updated count will appear here!';

    updateMessage(event) {
        this.message = event.detail.message;
    }
}

parent.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>56.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Demo

I'm sharing a small screen recording below so that it's clear how the component is behaving in real time:

That's all for this tutorial everyone, I hope you liked it. Let me know your feedback in the comments down below.

Happy Trailblazing!!

Apex Class (ToDoListController.cls)

JS Snippet (todo.js)

HTML Snippet (todo.html)

XML Snippet (todo.js-meta.xml)