How would you conditionally show different content in a component's template?

Newer versions of Angular provide the at if block, a built in control flow syntax that lets you show or hide content based on a condition directly in your template, replacing the older asterisk ngIf structural directive with a syntax that is closer to regular programming language conditionals.

@Component({
  selector: 'app-greeting',
  template: `
    @if (isLoggedIn) {
      <p>Welcome back</p>
    } @else {
      <p>Please log in</p>
    }
  `
})
export class GreetingComponent {
  isLoggedIn = false;
}