docs: clarify name collision info, add example snippet, and fix example CSS (#40451)

Fixes #40403 and fixes imgs and layout of example
that are unrestrained and thus are too big in StackBlitz.

PR Close #40451

aio/content/examples/interpolation/src/app/app.component.1.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+
+
+// #docregion var-collision
+@Component({
+  template: `
+    <div>
+      <!-- Hello, Padma -->
+      <h1>Hello, {{customer}}</h1>
+      <ul>
+        <!-- Ebony and Chiho in a list-->
+        <li *ngFor="let customer of customers"{{ customer.value }}></li>
+      </ul>
+    </div>
+  `
+})
+class AppComponent {
+  customers = [{value: 'Ebony'}, {value: 'Chiho'}];
+  customer = 'Padma';
+}
+// #enddocregion var-collision

aio/content/examples/interpolation/src/app/app.component.css

@@ -0,0 +1,8 @@
+div {
+  max-width: 600px;
+  margin: auto;
+}
+
+img {
+  max-width: 200px;
+}

aio/content/guide/interpolation.md

@@ -96,6 +96,16 @@ This next example features a template reference variable, `#customerInput`.
 
 <code-example path="interpolation/src/app/app.component.html" region="template-reference-variable" header="src/app/app.component.html (template reference variable)"></code-example>
 
+<div class="alert is-helpful">
+
+Template expressions cannot refer to anything in the global namespace, except `undefined`.
+They can't refer to `window` or `document`.
+Additionally, they can't call `console.log()` or `Math.max()` and they are restricted to referencing members of the expression context.
+
+</div>
+
+### Preventing name collisions
+
 The context against which an expression evaluates is the union of the template variables, the directive's context object&mdash;if it has one&mdash;and the component's members.
 If you reference a name that belongs to more than one of these namespaces, Angular applies the following logic to determine the context:
 
@@ -103,18 +113,16 @@ If you reference a name that belongs to more than one of these namespaces, Angul
 1. A name in the directive's context.
 1. The component's member names.
 
-The previous example presents such a name collision. The component has a `customer`
+To avoid variables shadowing variables in another context, keep variable names unique.
-property and the `*ngFor` defines a `customer` template variable.
+In the following example, the `AppComponent` template greets the `customer`, Padma.
 
-<div class="alert is-helpful">
+An `ngFor` then lists each `customer` in the `customers` array.
 
-The `customer` in `{{customer.name}}` refers to the template input variable, not the component's property.
+<code-example path="interpolation/src/app/app.component.1.ts" region="var-collision" header="src/app/app.component.ts"></code-example>
 
-Template expressions cannot refer to anything in the global namespace, except `undefined`.
+The `customer` within the `ngFor` is in the context of an `<ng-template>` and so refers to the `customer` in the `customers` array, in this case Ebony and Chiho.
-They can't refer to `window` or `document`.
+This list does not feature Padma because `customer` outside of the `ngFor` is in a different context.
-Additionally, they can't call `console.log()` or `Math.max()` and they are restricted to referencing members of the expression context.
+Conversely, `customer` in the `<h1>` doesn't include Ebony or Chiho because the context for this `customer` is the class and the class value for `customer` is Padma.
-
-</div>
 
 ## Expression best practices