docs: add example and edit two-way-binding section of Template Syntax (#26278)

PR Close #26278

aio/content/examples/two-way-binding/e2e/src/app.e2e-spec.ts

@@ -0,0 +1,42 @@
+import { browser, element, by } from 'protractor';
+
+describe('Two-way binding e2e tests', () => {
+
+  beforeEach(function () {
+    browser.get('');
+  });
+
+  let minusButton = element.all(by.css('button')).get(0);
+  let plusButton = element.all(by.css('button')).get(1);
+  let minus2Button = element.all(by.css('button')).get(2);
+  let plus2Button = element.all(by.css('button')).get(3);
+
+  it('should display Two-way Binding', function () {
+    expect(element(by.css('h1')).getText()).toEqual('Two-way Binding');
+  });
+
+  it('should display four buttons', function() {
+    expect(minusButton.getText()).toBe('-');
+    expect(plusButton.getText()).toBe('+');
+    expect(minus2Button.getText()).toBe('-');
+    expect(plus2Button.getText()).toBe('+');
+  });
+
+  it('should change font size labels', async () => {
+    await minusButton.click();
+    expect(element.all(by.css('label')).get(0).getText()).toEqual('FontSize: 15px');
+    expect(element.all(by.css('input')).get(0).getAttribute('value')).toEqual('15');
+
+    await plusButton.click();
+    expect(element.all(by.css('label')).get(0).getText()).toEqual('FontSize: 16px');
+    expect(element.all(by.css('input')).get(0).getAttribute('value')).toEqual('16');
+
+    await minus2Button.click();
+    await expect(element.all(by.css('label')).get(2).getText()).toEqual('FontSize: 15px');
+  });
+
+  it('should display De-sugared two-way binding', function () {
+    expect(element(by.css('h2')).getText()).toEqual('De-sugared two-way binding');
+  });
+
+});