diff --git a/aio/content/examples/built-in-directives/e2e/src/app.e2e-spec.ts b/aio/content/examples/built-in-directives/e2e/src/app.e2e-spec.ts index d25537cfdfe..5914222617d 100644 --- a/aio/content/examples/built-in-directives/e2e/src/app.e2e-spec.ts +++ b/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'); diff --git a/aio/content/examples/built-in-directives/src/app/app.component.html b/aio/content/examples/built-in-directives/src/app/app.component.html index 102827b6299..6afd6adb651 100644 --- a/aio/content/examples/built-in-directives/src/app/app.component.html +++ b/aio/content/examples/built-in-directives/src/app/app.component.html @@ -18,11 +18,6 @@

-

- - -

-

diff --git a/aio/content/examples/property-binding/e2e/src/app.e2e-spec.ts b/aio/content/examples/property-binding/e2e/src/app.e2e-spec.ts index 1124372cd2c..22c90b60274 100644 --- a/aio/content/examples/property-binding/e2e/src/app.e2e-spec.ts +++ b/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`); }); }); diff --git a/aio/content/examples/property-binding/src/app/app.component.html b/aio/content/examples/property-binding/src/app/app.component.html index f72099e174c..e91b4ee6ee5 100644 --- a/aio/content/examples/property-binding/src/app/app.component.html +++ b/aio/content/examples/property-binding/src/app/app.component.html @@ -6,8 +6,6 @@ -

Using bind- syntax:

-

Binding to the colSpan property

diff --git a/aio/content/examples/template-reference-variables/e2e/src/app.e2e-spec.ts b/aio/content/examples/template-reference-variables/e2e/src/app.e2e-spec.ts index 3fb0af18117..d93d0f734e5 100644 --- a/aio/content/examples/template-reference-variables/e2e/src/app.e2e-spec.ts +++ b/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"}'); diff --git a/aio/content/examples/template-reference-variables/src/app/app.component.html b/aio/content/examples/template-reference-variables/src/app/app.component.html index 6943468a5fd..ec02a787930 100644 --- a/aio/content/examples/template-reference-variables/src/app/app.component.html +++ b/aio/content/examples/template-reference-variables/src/app/app.component.html @@ -15,11 +15,6 @@ -
- - -
-
diff --git a/aio/content/examples/template-syntax/src/app/app.component.html b/aio/content/examples/template-syntax/src/app/app.component.html index 59fa05b1c1c..5eb77f58836 100644 --- a/aio/content/examples/template-syntax/src/app/app.component.html +++ b/aio/content/examples/template-syntax/src/app/app.component.html @@ -190,7 +190,6 @@ button

- top @@ -205,7 +204,6 @@ button

- top @@ -217,7 +215,6 @@ button
[ngClass] binding to the classes property
- @@ -289,8 +286,6 @@ button
This one is not so special
-
This class binding is special too
- top @@ -309,8 +304,6 @@ button - -
click with myClick
@@ -370,9 +363,6 @@ without NgModel [(ngModel)]
- -bindon-ngModel -
@@ -576,9 +566,6 @@ bindon-ngModel - - - diff --git a/aio/content/guide/binding-syntax.md b/aio/content/guide/binding-syntax.md index cdbdb54db84..96addfec739 100644 --- a/aio/content/guide/binding-syntax.md +++ b/aio/content/guide/binding-syntax.md @@ -148,7 +148,6 @@ Angular provides three categories of data binding according to the direction of {{expression}} [target]="expression" - bind-target="expression" @@ -163,7 +162,6 @@ Angular provides three categories of data binding according to the direction of (target)="statement" - on-target="statement" @@ -178,7 +176,6 @@ Angular provides three categories of data binding according to the direction of [(target)]="expression" - bindon-target="expression" diff --git a/aio/content/guide/deprecations.md b/aio/content/guide/deprecations.md index af2ef318e54..6d824f74bf7 100644 --- a/aio/content/guide/deprecations.md +++ b/aio/content/guide/deprecations.md @@ -61,6 +61,7 @@ v12 - v15 | `@angular/forms` | [`FormBuilder.group` legacy options parameter](api/forms/FormBuilder#group) | v14 | | `@angular/router` | [`ActivatedRoute` params and `queryParams` properties](#activatedroute-props) | unspecified | | template syntax | [`/deep/`, `>>>`, and `::ng-deep`](#deep-component-style-selector) | unspecified | +| template syntax | [`bind-`, `on-`, `bindon-`, and `ref-`](#bind-syntax) | 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} ### `