Development questions

How do you do conditional rendering and list iteration in LWC templates?

DevelopmentEasy

Conditional rendering

html
<template lwc:if={isLoading}>Loading…</template>
<template lwc:elseif={hasError}>Error</template>
<template lwc:else>Content</template>

(The older if:true / if:false directives still work but lwc:if, lwc:elseif, lwc:else are the current recommendation.)

Iteration

html
<template for:each={contacts} for:item="c">
  <li key={c.Id}>{c.Name}</li>
</template>

Also iterator:it={contacts} when you need it.first / it.last.

Rules: every iterated top-level element needs a unique, stable key (not the index), and templates only accept simple property references, so compute logic in JS getters.

lwctemplatesconditional