Conditional Rendering

Vuev-if / v-else

<script setup lang="ts">
defineProps<{
  isLogged: boolean
}>();
</script>

<template>
  <div>
    <p v-if="isLogged">Welcome again</p>
    
    <button v-if="isLogged">Sign out</button>
    <button v-else>Sign in</button>
  </div>
</template>

It uses v-if and v-else template directives to show different content based on a boolean condition.

Vue docs

React&& / ternary

function Hello({ isLogged }: { isLogged: boolean }) {
  return (
    <div>
      {isLogged && <p>Welcome again</p>}
      
      {isLogged ? (
        <button>Sign out</button>
      ) : (
        <button>Sign in</button>
      )}
    </div>
  );
}

It resolves the condition directly in JSX using JavaScript expressions such as && and the ternary operator.

React docs

Angular@if / @else

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-hello',
  standalone: true,
  template: `
    @if (isLogged) {
      <p>Welcome again</p>
      <button>Sign out</button>
    } @else {
      <button>Sign in</button>
    }
  `
})
export class HelloComponent {
  @Input() isLogged: boolean = false;
}

It uses @if and @else blocks in the template to decide which content is shown.

Angular docs