docs: edit template ref vars copy and example (#27371)

PR Close #27371

aio/content/examples/template-reference-variables/e2e/src/app.e2e-spec.ts

@@ -0,0 +1,62 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+import { logging } from 'selenium-webdriver';
+
+describe('Template-reference-variables-example', function() {
+  beforeEach(function() {
+    browser.get('');
+
+  });
+
+  // helper function used to test what's logged to the console
+  async function logChecker(button, contents) {
+    const logs = await browser
+      .manage()
+      .logs()
+      .get(logging.Type.BROWSER);
+    const message = logs.filter(({ message }) =>
+      message.indexOf(contents) !== -1 ? true : false
+    );
+    expect(message.length).toBeGreaterThan(0);
+  }
+
+  it('should display Template reference variables', function() {
+    expect(element(by.css('h1')).getText()).toEqual(
+      'Template reference variables'
+    );
+  });
+
+  it('should log a Calling 123 ... message', async () => {
+    let callButton = element.all(by.css('button')).get(0);
+    let phoneInput = element.all(by.css('input')).get(0);
+    await phoneInput.sendKeys('123');
+    await callButton.click();
+    const contents = 'Calling 123 ...';
+    await logChecker(callButton, contents);
+  });
+
+  it('should log a Faxing 123 ... message', async () => {
+    let faxButton = element.all(by.css('button')).get(1);
+    let faxInput = element.all(by.css('input')).get(1);
+    await faxInput.sendKeys('123');
+    await faxButton.click();
+    const contents = 'Faxing 123 ...';
+    await logChecker(faxButton, contents);
+  });
+
+  it('should display a disabled button', function() {
+    let disabledButton = element.all(by.css('button')).get(2);
+    expect(disabledButton.isEnabled()).toBe(false);
+  });
+
+  it('should submit form', async () => {
+    let submitButton = element.all(by.css('button')).get(3);
+    let nameInput = element.all(by.css('input')).get(2);
+    await nameInput.sendKeys('123');
+    await submitButton.click();
+    expect(element.all(by.css('div > p')).get(2).getText()).toEqual('Submitted. Form value is {"name":"123"}');
+  });
+
+
+});

aio/content/examples/template-reference-variables/src/app/app.component.html

@@ -0,0 +1,55 @@
+<h1>Template reference variables</h1>
+
+<div>
+  <h2>Pass value to an event handler</h2>
+  <p>See console for output.</p>
+  <!-- #docregion ref-phone -->
+  <!-- #docregion ref-var -->
+  <input #phone placeholder="phone number" />
+  <!-- #enddocregion ref-var -->
+
+  <!-- lots of other elements -->
+
+  <!-- phone refers to the input element; pass its `value` to an event handler -->
+  <button (click)="callPhone(phone.value)">Call</button>
+  <!-- #enddocregion ref-phone -->
+</div>
+
+<div>
+  <!-- #docregion ref-fax -->
+  <input ref-fax placeholder="fax number" />
+  <button (click)="callFax(fax.value)">Fax</button>
+  <!-- #enddocregion ref-fax -->
+</div>
+
+<hr />
+
+<div>
+  <h2>Template reference variable with disabled button</h2>
+  <p>btn refers to the button element.</p>
+  <button
+    #btn
+    disabled
+    [innerHTML]="'disabled by attribute: ' + btn.disabled"
+  ></button>
+</div>
+
+<hr />
+
+<h2>Reference variables, forms, and NgForm</h2>
+<!-- #docregion ngForm -->
+<form #itemForm="ngForm" (ngSubmit)="onSubmit(itemForm)">
+  <label for="name"
+    >Name <input class="form-control" name="name" ngModel required />
+  </label>
+  <button type="submit">Submit</button>
+</form>
+
+<div [hidden]="!itemForm.form.valid">
+  <p>{{ submitMessage }}</p>
+</div>
+
+<!-- #enddocregion ngForm -->
+
+
+<p>JSON: {{ itemForm.form.value | json }}</p>

aio/content/examples/template-reference-variables/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 'app'`, async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('app');
+  }));
+  it('should render title in a h1 tag', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
+  }));
+});

aio/content/examples/template-reference-variables/src/app/app.component.ts

@@ -0,0 +1,31 @@
+import { Component, ViewChild } from '@angular/core';
+import { NgForm } from '@angular/forms';
+
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  @ViewChild('itemForm', { static: false }) form: NgForm;
+
+  private _submitMessage = '';
+
+  get submitMessage() {
+    return this._submitMessage;
+  }
+
+  onSubmit(form: NgForm) {
+    this._submitMessage = 'Submitted. Form value is ' + JSON.stringify(form.value);
+  }
+
+  callPhone(value: string) {
+    console.warn(`Calling ${value} ...`);
+  }
+
+  callFax(value: string) {
+    console.warn(`Faxing ${value} ...`);
+  }
+
+}

aio/content/examples/template-reference-variables/src/app/app.module.ts

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

aio/content/examples/template-reference-variables/src/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Template Reference Variables Example</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>Loading...</app-root>
+</body>
+</html>

aio/content/examples/template-reference-variables/src/main.ts

@@ -0,0 +1,11 @@
+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);

aio/content/examples/template-reference-variables/stackblitz.json

@@ -0,0 +1,6 @@
+{
+  "description": "Template Reference Variables",
+  "files": ["!**/*.d.ts", "!**/*.js", "!**/*.[1,2].*"],
+  "file": "src/app/app.component.ts",
+  "tags": ["Template Reference Variables"]
+}