docs: re-write interpolation section and add example (#25170)

PR Close #25170

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

@@ -0,0 +1,59 @@
+
+<div>
+  <h1>Interpolation and Template Expressions</h1>
+  <hr />
+
+  <div>
+    <h2>Interpolation</h2>
+    <!-- #docregion interpolation-example1 -->
+    <h3>Current customer: {{ currentCustomer }}</h3>
+    <!-- #enddocregion interpolation-example1 -->
+
+    <!-- #docregion component-property -->
+    <p>{{title}}</p>
+    <div><img src="{{itemImageUrl}}"></div>
+    <!-- #enddocregion component-property -->
+
+    <h3>Evaluating template expressions </h3>
+    <h4>Simple evaluation (to a string):</h4>
+    <!-- #docregion convert-string -->
+    <!-- "The sum of 1 + 1 is 2" -->
+    <p>The sum of 1 + 1 is {{1 + 1}}.</p>
+    <!-- #enddocregion convert-string -->
+
+    <h4>Evaluates using a method (also evaluates to a string):</h4>
+    <!-- #docregion invoke-method -->
+    <!-- "The sum of 1 + 1 is not 4" -->
+    <p>The sum of 1 + 1 is not {{1 + 1 + getVal()}}.</p>
+    <!-- #enddocregion invoke-method -->
+  </div>
+
+  <hr />
+<h2>Expression Context</h2>
+
+<div>
+  <h3>Component context, properties of app.component.ts:</h3>
+  <!-- #docregion component-context -->
+  <h4>{{recommended}}</h4>
+  <img [src]="itemImageUrl2">
+  <!-- #enddocregion component-context -->
+</div>
+
+<div>
+  <h4>Template context, template input variables (let customer):</h4>
+  <!-- #docregion template-input-variable -->
+  <ul>
+    <li *ngFor="let customer of customers">{{customer.name}}</li>
+  </ul>
+  <!-- #enddocregion template-input-variable -->
+</div>
+
+<div (keyup)="0">
+  <h4>Template context: template reference variables (#customerInput):</h4>
+  <label>Type something:
+  <!-- #docregion template-reference-variable -->
+  <input #customerInput>{{customerInput.value}}</label>
+  <!-- #enddocregion template-reference-variable -->
+</div>
+
+</div>

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

@@ -0,0 +1,27 @@
+import { TestBed, async } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  }));
+  it('should create the app', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+  it(`should have as title 'Featured product:'`, async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('Featured product:');
+  }));
+  it('should render title in a p tag', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('p').textContent).toContain('Featured product:');
+  }));
+});

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

@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+
+import { CUSTOMERS } from './customers';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  customers = CUSTOMERS;
+
+  currentCustomer = 'Maria';
+  title = 'Featured product:';
+  itemImageUrl = '../assets/pottedPlant.png';
+
+  recommended = 'You might also like:';
+  itemImageUrl2 = '../assets/lamp.png';
+
+
+
+  getVal(): number { return 2; }
+
+
+}

aio/content/examples/interpolation/src/app/app.module.ts

@@ -0,0 +1,18 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+
+
+import { AppComponent } from './app.component';
+
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

aio/content/examples/interpolation/src/app/customer.ts

@@ -0,0 +1,3 @@
+export class Customer {
+  name: string;
+}

aio/content/examples/interpolation/src/app/customers.ts

@@ -0,0 +1,9 @@
+import { Customer } from './customer';
+
+export const CUSTOMERS: Customer[] = [
+  { name: 'Maria' },
+  { name: 'Oliver' },
+  { name: 'Walter' },
+  { name: 'Lakshmi' },
+  { name: 'Yasha' }
+];

aio/content/examples/interpolation/src/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Interpolation</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>

aio/content/examples/interpolation/src/main.ts

@@ -0,0 +1,12 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.log(err));