docs: Deprecate longhand binding prefixes (#43671)

DEPRECATION:

The template prefixes `bind-`, `on-`, `bindon-`, and `ref-` have been deprecated
in v13. Templates should use the more widely documented syntaxes for binding and references:

* `[input]="value"` instead of `bind-input="value"`
* `[@trigger]="value"` instead of `bind-animate-trigger="value"`
* `(click)="onClick()"` instead of `on-click="onClick()"`
* `[(ngModel)]="value"` instead of `bindon-ngModel="value"`
* `#templateRef` instead of `ref-templateRef`

PR Close #43671

aio/content/examples/built-in-directives/e2e/src/app.e2e-spec.ts

@@ -44,7 +44,7 @@ describe('Built-in Directives', () => {
   });
 
   it('should hide app-item-detail', async () => {
-    const hiddenMessage = element.all(by.css('p')).get(11);
+    const hiddenMessage = element.all(by.css('p')).get(10);
     const hiddenDiv = element.all(by.css('app-item-detail')).get(2);
 
     expect(await hiddenMessage.getText()).toContain('in the DOM');

aio/content/examples/built-in-directives/src/app/app.component.html

@@ -18,11 +18,6 @@
     <!-- #enddocregion NgModel-1 -->
   </p>
 
-  <p>
-    <label for="example-bindon">bindon-ngModel: </label>
-    <input bindon-ngModel="currentItem.name" id="example-bindon">
-  </p>
-
   <p>
     <label for="example-change">(ngModelChange)="...name=$event":</label>
     <input [ngModel]="currentItem.name" (ngModelChange)="currentItem.name=$event" id="example-change">

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

@@ -11,7 +11,7 @@ describe('Property binding e2e tests', () => {
 
   it('should display four phone pictures', async () => {
     expect(await element.all(by.css('img')).isPresent()).toBe(true);
-    expect(await element.all(by.css('img')).count()).toBe(4);
+    expect(await element.all(by.css('img')).count()).toBe(3);
   });
 
   it('should display Disabled button', async () => {
@@ -19,7 +19,7 @@ describe('Property binding e2e tests', () => {
   });
 
   it('should display Binding to a property of a directive', async () => {
-    expect(await element.all(by.css('h2')).get(4).getText()).toBe(`Binding to a property of a directive`);
+    expect(await element.all(by.css('h2')).get(3).getText()).toBe(`Binding to a property of a directive`);
   });
 
   it('should display blue', async () => {
@@ -43,6 +43,6 @@ describe('Property binding e2e tests', () => {
   });
 
   it('should display Malicious content', async () => {
-    expect(await element.all(by.css('h2')).get(7).getText()).toBe(`Malicious content`);
+    expect(await element.all(by.css('h2')).get(6).getText()).toBe(`Malicious content`);
   });
 });

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

@@ -6,8 +6,6 @@
   <!-- #docregion property-binding -->
   <img [src]="itemImageUrl">
   <!-- #enddocregion property-binding -->
-  <h2>Using bind- syntax:</h2>
-  <img bind-src="itemImageUrl">
   <hr />
 
   <h2>Binding to the colSpan property</h2>

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

@@ -28,23 +28,9 @@ describe('Template-reference-variables-example', () => {
     await logChecker(contents);
   });
 
-  it('should log a Faxing 123 ... message', async () => {
-    const faxButton = element.all(by.css('button')).get(1);
-    const faxInput = element.all(by.css('input')).get(1);
-    await faxInput.sendKeys('123');
-    await faxButton.click();
-    const contents = 'Faxing 123 ...';
-    await logChecker(contents);
-  });
-
-  it('should display a disabled button', async () => {
-    const disabledButton = element.all(by.css('button')).get(2);
-    expect(await disabledButton.isEnabled()).toBe(false);
-  });
-
   it('should submit form', async () => {
-    const submitButton = element.all(by.css('button')).get(3);
-    const nameInput = element.all(by.css('input')).get(2);
+    const submitButton = element.all(by.css('button')).get(2);
+    const nameInput = element.all(by.css('input')).get(1);
     await nameInput.sendKeys('123');
     await submitButton.click();
     expect(await 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

@@ -15,11 +15,6 @@
   <!-- #enddocregion ref-phone -->
 </div>
 
-<div>
-  <input ref-fax placeholder="fax number" />
-  <button (click)="callFax(fax.value)">Fax</button>
-</div>
-
 <hr />
 
 <div>

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

@@ -190,7 +190,6 @@ button</button>
 <br><br>
 
 <img [src]="iconUrl"/>
-<img bind-src="heroImageUrl"/>
 <img [attr.src]="villainImageUrl"/>
 
 <a class="to-toc" href="#toc">top</a>
@@ -205,7 +204,6 @@ button</button>
 <button disabled>disabled by attribute</button>
 <button [disabled]="isUnchanged">disabled by property binding</button>
 <br><br>
-<button bind-disabled="isUnchanged" on-click="onSave($event)">Disabled Cancel</button>
 <button [disabled]="!canSave" (click)="onSave($event)">Enabled Save</button>
 
 <a class="to-toc" href="#toc">top</a>
@@ -217,7 +215,6 @@ button</button>
 <button [disabled]="isUnchanged">Cancel is disabled</button>
 <div [ngClass]="classes">[ngClass] binding to the classes property</div>
 <app-hero-detail [hero]="currentHero"></app-hero-detail>
-<img bind-src="heroImageUrl">
 
 <!-- ERROR: HeroDetailComponent.hero expects a Hero object, not the string "currentHero" -->
 <!-- <app-hero-detail hero="currentHero"></app-hero-detail> -->
@@ -289,8 +286,6 @@ button</button>
 <div class="special"
      [class.special]="!isSpecial">This one is not so special</div>
 
-<div bind-class.special="isSpecial">This class binding is special too</div>
-
 <a class="to-toc" href="#toc">top</a>
 
 <!--style binding -->
@@ -309,8 +304,6 @@ button</button>
 
 <button (click)="onSave()">Save</button>
 
-<button on-click="onSave()">On Save</button>
-
 <div>
 <!-- `myClick` is an event on the custom `ClickDirective` -->
 <div (myClick)="clickMessage=$event" clickable>click with myClick</div>
@@ -370,9 +363,6 @@ without NgModel
 <input [(ngModel)]="currentHero.name">
 [(ngModel)]
 <br>
-<input bindon-ngModel="currentHero.name">
-bindon-ngModel
-<br>
 <input
   [ngModel]="currentHero.name"
   (ngModelChange)="currentHero.name=$event">
@@ -576,9 +566,6 @@ bindon-ngModel
 <!-- phone refers to the input element; pass its `value` to an event handler -->
 <button (click)="callPhone(phone.value)">Call</button>
 
-<input ref-fax placeholder="fax number">
-<button (click)="callFax(fax.value)">Fax</button>
-
 <!-- btn refers to the button element; show its disabled state -->
 <button #btn disabled [innerHTML]="'disabled by attribute: '+btn.disabled"></button>
 

aio/content/guide/binding-syntax.md

@@ -148,7 +148,6 @@ Angular provides three categories of data binding according to the direction of
       <code-example>
         {{expression}}
         [target]="expression"
-        bind-target="expression"
       </code-example>
 
     </td>
@@ -163,7 +162,6 @@ Angular provides three categories of data binding according to the direction of
       <td>
         <code-example>
           (target)="statement"
-          on-target="statement"
         </code-example>
       </td>
 
@@ -178,7 +176,6 @@ Angular provides three categories of data binding according to the direction of
       <td>
         <code-example>
           [(target)]="expression"
-          bindon-target="expression"
         </code-example>
       </td>
       <td>

aio/content/guide/deprecations.md

@@ -61,6 +61,7 @@ v12 - v15
 | `@angular/forms`        | [`FormBuilder.group` legacy options parameter](api/forms/FormBuilder#group)                   | <!--v11--> v14        |
 | `@angular/router`       | [`ActivatedRoute` params and `queryParams` properties](#activatedroute-props)                 | unspecified           |
 | template syntax         | [`/deep/`, `>>>`, and `::ng-deep`](#deep-component-style-selector)                            | <!--v7--> unspecified |
+| template syntax         | [`bind-`, `on-`, `bindon-`, and `ref-`](#bind-syntax)                            | <!--v13--> v15 |
 
 For information about Angular CDK and Angular Material deprecations, see the [changelog](https://github.com/angular/components/blob/master/CHANGELOG.md).
 
@@ -172,6 +173,19 @@ The shadow-dom-piercing descendant combinator is deprecated and support is being
 
 For more information, see [/deep/, >>>, and ::ng-deep](guide/component-styles#deprecated-deep--and-ng-deep "Component Styles guide, Deprecated deep and ngdeep") in the Component Styles guide.
 
+{@a bind-syntax}
+
+### `bind-`, `on-`, `bindon-`, and `ref-` prefixes
+
+The template prefixes `bind-`, `on-`, `bindon-`, and `ref-` have been deprecated in v13. Templates
+should use the more widely documented syntaxes for binding and references:
+
+* `[input]="value"` instead of `bind-input="value"`
+* `[@trigger]="value"` instead of	`bind-animate-trigger="value"`
+* `(click)="onClick()"` instead of `on-click="onClick()"`
+* `[(ngModel)]="value"` instead of `bindon-ngModel="value"`
+* `#templateRef` instead of `ref-templateRef`
+
 {@a template-tag}
 
 ### `<template>` tag