Conditional rendering in LWC – multiple html file

Lightning web component allows you to conditional rendering of html files based on device width. According to docs, For complex tasks like conditionally rendering (in LWC) a template or importing a custom one, use render() to override standard rendering functionality. This function gets invoked after connectedCallback() and must return a valid HTML template.

Component Design for Conditional rendering in LWC

We have a lightning web component with two extra html file. Our aim is to conditional rendering the file based on the device width. When the component is viewed on a mobile device, it renders the smallScreen.html file to match the smaller display. On larger screens, it instead renders the largeScreen.html file to provide an optimized layout for wider viewports.

Code

renderHtml.html

This file contains blank template. We do have two other html file in the component folder which will render based on device width.

<template>
    
</template>

renderHtml.js

The javaScript file contains render() method which is a part of life cycle hooks. As per the code below, method return the imported html file based on device width.

import { LightningElement } from "lwc";
import smallScreen from "./smallScreen.html";
import largeScreen from "./largeScreen.html";

export default class RenderHtml extends LightningElement {
  render() {
    return window.screen.width < 768 ? smallScreen : largeScreen;
  }
}

renderHtml.js-meta.xml

The configuration file defines the metadata values for the component, including the design configuration for Lightning App Builder and Community Builder. In simple words, It defines where you can use the component in Lightning Experience.

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

smallScreen.html

The component renders this file only when the device width meets small screen conditions.

<template>
  This is small Screen
</template>

largeScreen.html

The component renders this file only when the device width meets large screen conditions.

<template>
This is large Screen
</template>

Demo(Conditional rendering of html files based on device width)

On mobile, the component displays ‘this is small screen’ because it renders smallScreen.html.

On desktop, the component displays ‘this is large screen’ because it renders largeScreen.html.

Do you need help?

Are you stuck while working on this requirement? Do you want to get review of your solution? Now, you can book dedicated 1:1 with me on Lightning Web Component and Agentforce completely free.

GET IN TOUCH