diff --git a/adev/src/content/examples/i18n/src/app/app.component.html b/adev/src/content/examples/i18n/src/app/app.component.html
index 700d4f0055b..2e2509a64ba 100644
--- a/adev/src/content/examples/i18n/src/app/app.component.html
+++ b/adev/src/content/examples/i18n/src/app/app.component.html
@@ -33,3 +33,8 @@
   other {{{ minutes }} minutes ago by {gender, select, male {male} female {female} other {other}}}}
 </span>
 <!--#enddocregion i18n-nested-->
+<br><br>
+<!--#docregion i18n-conditional-->
+<button type="button" (click)="toggleDisplay()">Toggle</button>
+<div i18n [attr.aria-label]="toggleAriaLabel()">{{toggle()}}</div>
+<!--#enddocregion i18n-conditional-->
diff --git a/adev/src/content/examples/i18n/src/app/app.component.ts b/adev/src/content/examples/i18n/src/app/app.component.ts
index b3a1d975b96..b6d83f700aa 100644
--- a/adev/src/content/examples/i18n/src/app/app.component.ts
+++ b/adev/src/content/examples/i18n/src/app/app.component.ts
@@ -1,5 +1,6 @@
 // #docregion
-import {Component} from '@angular/core';
+import {Component, computed, signal} from '@angular/core';
+import {$localize} from '@angular/localize/init';
 
 @Component({
   standalone: true,
@@ -11,6 +12,13 @@ export class AppComponent {
   gender = 'female';
   fly = true;
   logo = '${this.baseUrl}/angular.svg';
+  toggle = signal(false);
+  toggleAriaLabel = computed(() => {
+    return this.toggle()
+      ? $localize`:Toggle Button|A button to toggle status:Show`
+      : $localize`:Toggle Button|A button to toggle status:Hide`;
+  });
+
   inc(i: number) {
     this.minutes = Math.min(5, Math.max(0, this.minutes + i));
   }
@@ -23,4 +31,7 @@ export class AppComponent {
   other() {
     this.gender = 'other';
   }
+  toggleDisplay() {
+    this.toggle.update((toggle) => !toggle);
+  }
 }
diff --git a/adev/src/content/guide/i18n/manage-marked-text.md b/adev/src/content/guide/i18n/manage-marked-text.md
index 23e168ffea0..69a11047ce3 100644
--- a/adev/src/content/guide/i18n/manage-marked-text.md
+++ b/adev/src/content/guide/i18n/manage-marked-text.md
@@ -32,7 +32,7 @@ The following example defines the `introductionHeader` custom ID for a variable.
 
 <docs-code language="typescript">
 
-variableText1 = $localize `:@@introductionHeader:Hello i18n!`;
+variableText1 = $localize`:@@introductionHeader:Hello i18n!`;
 
 </docs-code>
 
@@ -58,7 +58,7 @@ The following example defines the `introductionHeader` custom ID and description
 
 <docs-code language="typescript">
 
-variableText2 = $localize `:An introduction header for this sample@@introductionHeader:Hello i18n!`;
+variableText2 = $localize`:An introduction header for this sample@@introductionHeader:Hello i18n!`;
 
 </docs-code>
 
@@ -72,7 +72,7 @@ The following example defines the `introductionHeader` custom ID for a variable.
 
 <docs-code language="typescript">
 
-variableText3 = $localize `:site header|An introduction header for this sample@@introductionHeader:Hello i18n!`;
+variableText3 = $localize`:site header|An introduction header for this sample@@introductionHeader:Hello i18n!`;
 
 </docs-code>
 
diff --git a/adev/src/content/guide/i18n/prepare.md b/adev/src/content/guide/i18n/prepare.md
index dfe95883941..b85da85cd4b 100644
--- a/adev/src/content/guide/i18n/prepare.md
+++ b/adev/src/content/guide/i18n/prepare.md
@@ -29,6 +29,16 @@ To mark the greeting for translation, add the `i18n` attribute to the `<h1>` tag
 
 <docs-code header="src/app/app.component.html" path="adev/src/content/examples/i18n/doc-files/app.component.html" visibleRegion="i18n-attribute"/>
 
+
+### using conditional statement with `i18n`
+
+The following `<div>` tag will display translated text as part of `div` and `aria-label` based on toggle status 
+
+<docs-code-multifile>
+    <docs-code header="src/app/app.component.html" path="adev/src/content/examples/i18n/src/app/app.component.html"  visibleRegion="i18n-conditional"/>
+    <docs-code header="src/app/app.component.ts" path="adev/src/content/examples/i18n/src/app/app.component.ts" visibleLines="[[14,16],[17,24],[37,39]]"/>
+</docs-code-multifile>
+
 ### Translate inline text without HTML element
 
 Use the `<ng-container>` element to associate a translation behavior for specific text without changing the way text is displayed.
@@ -82,7 +92,7 @@ Use the [`$localize`][ApiLocalizeInitLocalize] tagged message string to mark a s
 <!--todo: replace with docs-code -->
 
 <docs-code language="typescript">
-$localize `string_to_translate`;
+$localize`string_to_translate`;
 </docs-code>
 
 The i18n metadata is surrounded by colon \(`:`\) characters and prepends the translation source text.
@@ -90,7 +100,7 @@ The i18n metadata is surrounded by colon \(`:`\) characters and prepends the tra
 <!--todo: replace with docs-code -->
 
 <docs-code language="typescript">
-$localize `:{i18n_metadata}:string_to_translate`
+$localize`:{i18n_metadata}:string_to_translate`
 </docs-code>
 
 ### Include interpolated text
@@ -100,15 +110,23 @@ Include [interpolations](guide/templates/binding#render-dynamic-text-with-text-i
 <!--todo: replace with docs-code -->
 
 <docs-code language="typescript">
-$localize `string_to_translate ${variable_name}`;
+$localize`string_to_translate ${variable_name}`;
 </docs-code>
 
 ### Name the interpolation placeholder
 
 <docs-code language="typescript">
-$localize `string_to_translate ${variable_name}:placeholder_name:`;
+$localize`string_to_translate ${variable_name}:placeholder_name:`;
 </docs-code>
 
+### Conditional syntax for translations
+
+<docs-code language="typescript">
+return this.show ? $localize`Show Tabs` : $localize`Hide tabs`;
+</docs-code>
+
+
+
 ## i18n metadata for translation
 
 <!--todo: replace with docs-code -->
@@ -143,7 +161,7 @@ The following example shows the value of the [`$localize`][ApiLocalizeInitLocali
 
 <docs-code language="typescript">
 
-$localize `:An introduction header for this sample:Hello i18n!`;
+$localize`:An introduction header for this sample:Hello i18n!`;
 
 </docs-code>
 
@@ -166,7 +184,7 @@ The following code example shows the value of the [`$localize`][ApiLocalizeInitL
 
 <docs-code language="typescript">
 
-$localize `:site header|An introduction header for this sample:Hello i18n!`;
+$localize`:site header|An introduction header for this sample:Hello i18n!`;
 
 </docs-code>