@Component({
  selector: 'app-demo',
  template: `
  <div> <!-- for a short while both A and B will be visible, when app becomes stable A will disappear -->
    @if (variant === 'A') {
      <span>A</span>
    } @else {
      <span>B</span>
    }
  </div>

  <div> <!-- for a short while both A and B will be visible, when app becomes stable A will disappear -->
    @switch (variant) {
      @case('A') { <span>A</span> }
      @case('B') { <span>B</span> }
    }
  </div>

  <div><!-- for a short while both A and B will be visible, when app becomes stable A will disappear -->
    <ng-container [ngSwitch]="variant">
      <span *ngSwithCase="A">A</span>
      <span *ngSwithCase="B">B</span>
    </ng-container>
  </div>

  <div><!-- for a short while both A and B will be visible, when app becomes stable A will disappear -->
    <ng-container *ngTemplateOutlet="variant === 'A' ? templateA : templateB" />
    <ng-template #templateA>
       <span>A</span>
    </ng-template>
    <ng-template #templateB>
       <span>B</span>
    </ng-template>
  </div>

  <div><!-- this will work fine, only A or B will be visible at any time -->
    <ng-container *ngIf="variant === 'A'; else templateB">
       <span>A</span>
    </ng-container>
    <ng-template #templateB>
       <span>B</span>
    </ng-template>
  </div>
  `,
  imports: [CommonModule],
})
export class DemoComponent implements OnInit {
  private readonly platformId = inject(PLATFORM_ID);
  variant = 'A';
  
  ngOnInit(): void {
    // simulating different state, in the browser than it was in the server
    // IRL, this could be any state change: user permissions, authentication, query parameters, etc.
    if (isPlatformBrowser(this.platformId)) {
       this.variant = 'B';
    }
  }
}