Assuming you have already set up Visual Studio Code and installed the necessary extensions:
It is as easy as right click the folder in VS Code to delete > SFDX: Delete From Project and Org
Note: If you accidentally renamed your LWC in VS Code and pushed it into your org (e.g. Renamed "LWC_Eample" to "LWC_Example"), the old LWC "LWC_Eample" will still be visible in your SFDC org but not present in your VS Code.
If this happens, go to your VS code project, Right Click your "Manifest > Package.xml" > Retrieve Source in Manifest from Org.
Presto, your old LWC "LWC_Eample" will appear in VS code. Then you can proceed to SFDX: Delete From Project and Org
this
is quite funny in javascript, in connectedCallback
this
refers to component, but in showPosition
as its async method, this
is undefined, and thus you cannot set lat and long
Usually, for this scenario, we pass the current component reference this
to showPosition method like one here. But as per Mozilla document , you cant pass custom parameter to getCurrentPositionCallback
You have to use fatArrow function for getCurrentPositionCallback
.
Thus your JS code will be:
import { LightningElement, track, api } from 'lwc';
export default class App extends LightningElement {
@track lat;
@track lng;
connectedCallback() {
console.log('Connected callback called'+ navigator.geolocation);
console.log(JSON.stringify(navigator.geolocation));
let myComponent = this;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition((position)=>{
console.log("position: ",position);
console.log("position coords: ",position.coords);
console.log("position coords lat: ",position.coords.latitude);
myComponent.lat = position.coords.latitude;
myComponent.lng = position.coords.longitude;
console.log("lat: ",myComponent.lat);
console.log("lng: ",myComponent.lng);
});
}
}
}
Playground Link : https://developer.salesforce.com/docs/component-library/tools/playground/htbBevIZr/2/edit
Best Answer
connectedcallback()
The connected callback is executed when the component is inserted into DOM. Connected callback runs once when the component is inserted. If you know aura components then this is similar to aura init handler.
We generally use it when we need to do something when the component is loaded. For eg. query some data when the component is loaded.
The execution flow of
connectedCallback
is parent to child. So you cannot access child elements in theconnectedCallback
, because they are not inserted yet.Example:
parentComponent.js
childComponent.js
parentComponent.html
If we run the above code, then the console logs will be like below:
renderedcallback()
This gets called when the component is rendered. Basically when all the elements on the component are inserted.
The meaning of above statement from the docs is that, the component is rerendered when any reactive property is changed. For. eg. The property with
@track
,@api
,@wire
, with getter setter and any premitive property which is member of component class. The component reevaluate all the expression based on the new data in the reactive properties.Most common example of
renderedCallback()
is that we use to load the static resources.(write code to prevent it from running twice).The execution flow of
renderedcallback
is child to parent, means therenderedcallback
of all childs are called before the parent's.Points to remember:
connectedCallback()
hook can fire more than once. For example, if you remove an element and then insert it into another position. If you want code to run one time, write code to prevent it from running twiceconnectedCallback()
.renderedCallback()
renderedCallback()
There are other nuances which you can find in the below mentioned links.
Important References
Run Code When a Component Is Inserted or Removed from the DOM
Run Code When a Component Renders
Lifecycle Flow