Else blocks

Since the two conditions — if user.loggedIn and if !user.loggedIn — are mutually exclusive, we can simplify this component slightly by using an else block:

  1. {#if user.loggedIn}
  2.     <button on:click={toggle}>
  3.         Log out
  4.     </button>
  5. {:else}
  6.     <button on:click={toggle}>
  7.         Log in
  8.     </button>
  9. {/if}

A # character always indicates a block opening tag. A / character always indicates a block closing tag. A : character, as in {:else}, indicates a block continuation tag. Don’t worry — you’ve already learned almost all the syntax Svelte adds to HTML.