# Simulate a TabBar - @switch version

This Angular component uses the @switch block for conditional rendering based on a value (in this example, currentIndex).

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

currentIndex is a signal and it's initialized to 0, which holds the current index value.
Button Group: Three buttons labeled "one", "two", and "three" set currentIndex to 0, 1, and 2 respectively when clicked.
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

In this example we'll guide the user through a series of steps, using the @switch block for conditional rendering based on the current step.

src/app.component.ts

Unblock the content

It's completely free!

Don’t have an account yet?

New

Accedi a TUTTI I CORSI PREMIUM ad un unico prezzo!

@switch block

Inspired by the JavaScript switch statement

2 snippets

6 mins

v.18

Fabio Biondi

Google Expert | Angular

This Angular component uses the @switch block for conditional rendering based on a value (in this example, currentIndex).

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

currentIndex is a signal and it's initialized to 0, which holds the current index value.
Button Group: Three buttons labeled "one", "two", and "three" set currentIndex to 0, 1, and 2 respectively when clicked.
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...".