render in Lightning Webcomponent


Render:
Call this method to update the user interface.
It may be called before or after connected call back.
It is used to conditionally render a template.
template1.html
<template>
    Yes I am in first template
</template>
template2.html
<template>
    Yes I am in second template
</template>
parentComponent.html
<template>
	Yes I am in main component
</template>
parentComponent.js
import { LightningElement } from 'lwc';
import template1 from "./template1.html";
import template2  from "./template2.html";
export default class ParentComponent extends LightningElement {
	//we are setting  the template2 equal to true so it will display the templat2 content.
    template2=true;
    render(){
        return this.template1?template1:template2;
    }
}
LightningApplication
<aura:application extends="force:slds">
	<c:parentComponent>
	</c:parentComponent>
</aura:application>
output:
Yes I am in second template.

Comments