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

PR Close #27371

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 { }