@switch block

Inspired by the JavaScript switch statement

2 snippets

6 mins

v.18

Fabio Biondi

Google Developer Expert
Microsoft MVP

# Simulate a TabBar - @switch version

This example is very similar to the last of the previous lesson where we used @if...@else blocks

In this example:

1. currentIndex is a signal and it's initialized to 0, which holds the current index value.
2. Button Group: Three buttons labeled "one", "two", and "three" set currentIndex to 0, 1, and 2 respectively when clicked.
3. Uses @switch to render different content based on the currentIndex value:
   • @case(0): Displays "Content 1" and "lorem ipsum".
   • @case(1): Displays "Content 2" and "Another content".
   • @case(2): Displays "Content 3" and "More content...".

src/app.component.ts

# Create a multistep app with @switch block