How to Retrieve the info about Lightning Community in LWC

 Hello Friends today we are going to discus how to get Lighting community details in to LWC.

we can use the @salesforce/community module  in to Lightning web components for Lightning communities.

it help to provide information about the current community context with in LWC, let see by some of the Example.

Example 1:-

Use @salesforce/community/Id to import the ID of the current community

use case, when your component must pass the community ID as a parameter to an API.

syntax :-

import communityId from ‘@salesforce/community/Id’;

Example 2:-

Use @salesforce/community/basePath to import the base URL of your community

Use case, when building a link component that works across several communities.

syntax :-

import communityBasePath from ‘@salesforce/community/basePath’;

How to Use multiple conditions in aura:if on lightning component

 Hello Friends as we know aura: if  on lightning component for rendering section/div. lets check in details

 we can not use [&& ,AND ,||, OR] operator for use multiple conditions  in isTrue attribute with In aura:if tag. we can use logical Functions in aura:if tag like  or(), and() .

Sample code for  how to use multiple Boolean conditions in aura:if tag.

<aura:component >
   <aura:attribute name="FlagOneisTrue" type="boolean" default="true"/>
   <aura:attribute name="FlagTwoisFalse" type="boolean" default="false"/>
   <aura:attribute name="FlagthreeisTrue" type="boolean" default="true"/>
   <aura:attribute name="FlagFourisFalse" type="boolean" default="false"/>
 
  <!--aura:if sample code with and -->
   <aura:if  isTrue="{!and(v.FlagOneisTrue, v.FlagthreeisTrue)}" >
      <div style="padding:15px; background-color:LightBlue">
         Out Come ==> this div show because both attribute is true beacse we use and
      </div>
   </aura:if>
   <!--aura:if with aura:set sample with or-->
   <aura:if  isTrue="{!or(v.FlagFourisFalse, v.FlagTwoisFalse)}" >
      <div style="padding:15px; background-color:GreenYellow">
          Out Come  ==> this div show because one attribute is true,beacse we use or
      </div>
      <aura:set attribute="else">
         <div style="padding:15px; background-color:GreenYellow">
             Out Come  ==> this aura:set div show because both attribute is false
         </div>
      </aura:set>
   </aura:if>
   <!--aura:if with nested and condition  with and along with or-->
   <aura:if  isTrue="{!or(and(v.FlagOneisTrue, v.FlagthreeisTrue) , v.FlagTwoisFalse ) }" >
      <div style="padding:15px; background-color:LightGreen  ">
        Out Come ===>  nested condition div show because in statment 1 of or()condition returns true.
      </div>
   </aura:if>
</aura:component>

interact one lightning Web Component with Aura Component.

Step 1) First we create Lightning Web Component with name “linkToAnotherCmp”

• Click this link on how to create Lightning Web Component.
• Then, put this code into linkToAnotherCmp.html

	<template>
	<div>
	I'm Lightning Web Component
	<br/>
	Input : <input class="txtInput" />
	<lightning-button label="Send to Aura Component" onclick={raiseEvent}></lightning-button>
	</div>
	</template>

linkToAnotherCmp.html

Here, you see the difference between Aura Components and Lightning Web Component., In Aura Component, we use ‘colon’ in the tag.

And In Lightning Web Component, we use ‘dash’ in the tag.

• Put this code into lintToAnotherCmp.js

	import { LightningElement } from 'lwc';
	export default class LinkToAnotherCmp extends LightningElement {
	raiseEvent(event){
	let txtInput = this.template.querySelector(".txtInput");
	const v = txtInput.value;
	const textChangeEvent = new CustomEvent('txtChange',{
	detail : {v},
	});
	//Fire Event
	this.dispatchEvent(textChangeEvent);
	}
	}

linkToAnotherCmp.js 

Here, we fire the event from Lightning Web Component to Aura Component. Instead of event.fire in an Aura Component, use the standard DOM Method, this.dispatchEvent(myEvent), in Lightning Web Component.

The first argument in the CustomEvent constructor set the name to be ‘txtChange’.

The second argument is an object that configures the object behaviour. In this object, we set the “detail” which is payload event. A handling component can read for data. In this case, we’re passing the “v”.And In variable(v), we set the “txtInput.value”.

Step 2) Create Lightning Aura Component with name “EventDemo”

• Put this code into EventDemo.cmp

	<aura:component>
	<aura:attribute name="textFromEvent" type="String" />
	<div class="slds">
	In Parent Lightning Component : {!v.textFromEvent}
	<c:linkToAnotherCmp ontxtChange = "{!c.lwcEventHandler}" />
	</div>
	</aura:component>

EventDemp.cmp 

Here, we link the Lightning Web Component and handle the event fired by LWC using “ontxtChange”.In LWC, we use “txtChange” name in CustomEvent constructor and when we handle the event we add the “on”.

• Put this code into EventDempController.js

	({
	lwcEventHandler : function(component, event, helper) {
	var eventData = event.getParam('v');
	component.set("v.textFromEvent",eventData);
	}
	})

EventDempController.js

Here, we get the value that fired by LWC using “event.getParam(‘v’)”.

Step 3) Create Lightning App with name “Demo”

• Put this code into Demo.app

	<aura:application extends="force:slds">
	<div class="slds-box slds-text-heading_large slds-text-align_center">
	Lightning Web Component - Apex Hours
	<div class=" slds-grid slds-gutters slds-align_absolute-center slds-wrap">
	<div class="slds-size_8-of-12">
	<c:EventDemo />
	</div>
	</div>
	</div>
	</aura:application>

Demo.app 

We can call the Lightning Web Components into Aura Component and Lightning Web Components.

Note:- We do not call Aura Component into Lightning Web Components.