docs: rewrite binding-syntax section in template-syntax.md (#25561)

PR Close #25561

aio/content/examples/binding-syntax/src/app/app.component.css

@@ -0,0 +1,3 @@
+div {
+  padding: .25rem 0;
+}

aio/content/examples/binding-syntax/src/app/app.component.html

@@ -0,0 +1,45 @@
+
+<div>
+  <h1>Binding syntax</h1>
+  <hr />
+
+  <div>
+    <h2>Button disabled state bound to isUnchanged property</h2>
+    <!-- #docregion disabled-button -->
+    <!-- Bind button disabled state to `isUnchanged` property -->
+    <button [disabled]="isUnchanged">Save</button>
+    <!-- #enddocregion disabled-button -->
+  </div>
+
+  <hr />
+
+  <div (keyup)="0">
+    <h2>HTML attributes and DOM properties</h2>
+    <p>1. Use the inspector to see the HTML attribute and DOM property values. Click the buttons to log values to the console.</p>
+
+    <label>HTML Attribute Initializes to "Sarah":
+    <input type="text" value="Sarah" #bindingInput></label>
+    <div>
+    <button (click)="getHTMLAttributeValue()">Get HTML attribute value</button> Won't change.
+    </div>
+
+    <div>
+        <button (click)="getDOMPropertyValue()">Get DOM property value</button> Changeable. Angular works with these.
+    </div>
+
+    <p>2. Change the name in the input and click the buttons again.</p>
+  </div>
+
+  <hr />
+
+  <div>
+    <h3>Disabled property vs. attribute</h3>
+    <p>Use the inspector to see the Test Button work and its disabled property toggle.</p>
+    <div>
+    <button id="testButton" (click)="working()">Test Button</button>
+    </div>
+    <div>
+    <button (click)="toggleDisabled()">Toggle disabled property for Test Button</button>
+  </div>
+
+</div>

aio/content/examples/binding-syntax/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/binding-syntax/src/app/app.component.ts

@@ -0,0 +1,33 @@
+import { Component, ViewChild, ElementRef } from '@angular/core';
+
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+
+  @ViewChild('bindingInput', { static: false }) bindingInput: ElementRef;
+
+  isUnchanged = true;
+
+  getHTMLAttributeValue(): any {
+    console.warn('HTML attribute value: ' + this.bindingInput.nativeElement.getAttribute('value'));
+  }
+
+  getDOMPropertyValue(): any {
+    console.warn('DOM property value: ' + this.bindingInput.nativeElement.value);
+  }
+
+  working(): any {
+    console.warn('Test Button works!');
+  }
+
+  toggleDisabled(): any {
+
+    let testButton = <HTMLInputElement> document.getElementById('testButton');
+    testButton.disabled = !testButton.disabled;
+    console.warn(testButton.disabled);
+  }
+}

aio/content/examples/binding-syntax/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/binding-syntax/src/index.html

@@ -0,0 +1,14 @@
+<!-- #docregion -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <base href="/">
+    <title>Angular binding syntax example</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body>
+    <app-root>Loading...</app-root>
+  </body>
+</html>
+<!-- #enddocregion -->

aio/content/examples/binding-syntax/src/main.ts

@@ -0,0 +1,12 @@
+// #docregion
+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);