refactor(@angular/cli): update MCP example tool format for if example

The sample `@if` example for the MCP experimental `find_examples` tool
has been updated to use a more structured format. This format is being
used to evaluate optimal structure for future examples.

Author: clydin

packages/angular/cli/lib/examples/if-block.md

@@ -1,28 +1,85 @@
-# Angular @if Control Flow Example
+---
+title: 'Using the @if Built-in Control Flow Block'
+summary: 'Demonstrates how to use the @if built-in control flow block to conditionally render content in an Angular template based on a boolean expression.'
+keywords:
+  - '@if'
+  - 'control flow'
+  - 'conditional rendering'
+  - 'template syntax'
+related_concepts:
+  - '@else'
+  - '@else if'
+  - 'signals'
+related_tools:
+  - 'modernize'
+---
 
-This example demonstrates how to use the `@if` control flow block in an Angular template. The visibility of a `<div>` element is controlled by a boolean field in the component's TypeScript code.
+## Purpose
 
-## Angular Template
+The purpose of this pattern is to create dynamic user interfaces by controlling which elements are rendered to the DOM based on the application's state. This is a fundamental technique for building responsive and interactive components.
 
-```html
-<!-- The @if directive will only render this div if the 'isVisible' signal in the component is true. -->
-@if (isVisible()) {
-<div>This content is conditionally displayed.</div>
+## When to Use
+
+Use the `@if` block as the modern, preferred alternative to the `*ngIf` directive for all conditional rendering. It offers better type-checking and a cleaner, more intuitive syntax within the template.
+
+## Key Concepts
+
+- **`@if` block:** The primary syntax for conditional rendering in modern Angular templates. It evaluates a boolean expression and renders the content within its block if the expression is true.
+
+## Example Files
+
+### `conditional-content.component.ts`
+
+This is a self-contained standalone component that demonstrates the `@if` block with an optional `@else` block.
+
+```typescript
+import { Component, signal } from '@angular/core';
+
+@Component({
+  selector: 'app-conditional-content',
+  template: `
+    <button (click)="toggleVisibility()">Toggle Content</button>
+
+    @if (isVisible()) {
+      <div>This content is conditionally displayed.</div>
+    } @else {
+      <div>The content is hidden. Click the button to show it.</div>
+    }
+  `,
+})
+export class ConditionalContentComponent {
+  protected readonly isVisible = signal(true);
+
+  toggleVisibility(): void {
+    this.isVisible.update((v) => !v);
+  }
 }
 ```
 
-## Component TypeScript
+## Usage Notes
+
+- The expression inside the `@if ()` block must evaluate to a boolean.
+- This example uses a signal, which is a common pattern, but any boolean property or method call from the component can be used.
+- The `@else` block is optional and is rendered when the `@if` condition is `false`.
+
+## How to Use This Example
+
+### 1. Import the Component
+
+In a standalone architecture, import the component into the `imports` array of the parent component where you want to use it.
 
 ```typescript
+// in app.component.ts
 import { Component } from '@angular/core';
+import { ConditionalContentComponent } from './conditional-content.component';
 
 @Component({
-  selector: 'app-example',
-  templateUrl: './example.html',
-  styleUrl: './example.css',
+  selector: 'app-root',
+  imports: [ConditionalContentComponent],
+  template: `
+    <h1>My Application</h1>
+    <app-conditional-content></app-conditional-content>
+  `,
 })
-export class Example {
-  // This boolean signal controls the visibility of the element in the template.
-  protected readonly isVisible = signal(true);
-}
+export class AppComponent {}
 ```