What is the new at if control flow block in Angular, and how does it compare to the older asterisk ngIf directive?

The at if block is a newer, built in template syntax for conditionally showing content, reading more like a regular programming language conditional than the older asterisk ngIf structural directive. It requires no imports, since it is built directly into Angular's template compiler, and generally performs better than the older directive.

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