diff --git a/aio/content/guide/structural-directives.md b/aio/content/guide/structural-directives.md index 71bed73414..0a2c64478c 100644 --- a/aio/content/guide/structural-directives.md +++ b/aio/content/guide/structural-directives.md @@ -313,7 +313,7 @@ It's intended source is implicit. Angular sets `let-hero` to the value of the context's `$implicit` property which `NgFor` has initialized with the hero for the current iteration. -* The [API guide](api/common/NgFor "API: NgFor") +* The [API guide](api/common/NgForOf "API: NgFor") describes additional `NgFor` directive properties and context properties. These microsyntax mechanisms are available to you when you write your own structural directives. diff --git a/aio/content/guide/template-syntax.md b/aio/content/guide/template-syntax.md index 65e0b5c5b9..b904eb811f 100644 --- a/aio/content/guide/template-syntax.md +++ b/aio/content/guide/template-syntax.md @@ -1361,8 +1361,8 @@ to group elements when there is no suitable host element for the directive. _This_ section is an introduction to the common structural directives: * [`NgIf`](guide/template-syntax#ngIf) - conditionally add or remove an element from the DOM -* [`NgFor`](guide/template-syntax#ngFor) - repeat a template for each item in a list * [`NgSwitch`](guide/template-syntax#ngSwitch) - a set of directives that switch among alternative views +* [NgForOf](guide/template-syntax#ngFor) - repeat a template for each item in a list
@@ -1437,18 +1437,18 @@ described below. {@a ngFor} -### NgFor +### NgForOf -`NgFor` is a _repeater_ directive — a way to present a list of items. +`NgForOf` is a _repeater_ directive — a way to present a list of items. You define a block of HTML that defines how a single item should be displayed. You tell Angular to use that block as a template for rendering each item in the list. -Here is an example of `NgFor` applied to a simple `
`: +Here is an example of `NgForOf` applied to a simple `
`: -You can also apply an `NgFor` to a component element, as in this example: +You can also apply an `NgForOf` to a component element, as in this example: @@ -1485,10 +1485,10 @@ Learn about the _microsyntax_ in the [_Structural Directives_](guide/structural- ### Template input variables The `let` keyword before `hero` creates a _template input variable_ called `hero`. -The `ngFor` directive iterates over the `heroes` array returned by the parent component's `heroes` property +The `NgForOf` directive iterates over the `heroes` array returned by the parent component's `heroes` property and sets `hero` to the current item from the array during each iteration. -You reference the `hero` input variable within the `ngFor` host element +You reference the `hero` input variable within the `NgForOf` host element (and within its descendents) to access the hero's properties. Here it is referenced first in an interpolation and then passed in a binding to the `hero` property of the `` component. @@ -1501,7 +1501,7 @@ Learn more about _template input variables_ in the #### *ngFor with _index_ -The `index` property of the `NgFor` directive context returns the zero-based index of the item in each iteration. +The `index` property of the `NgForOf` directive context returns the zero-based index of the item in each iteration. You can capture the `index` in a template input variable and use it in the template. The next example captures the `index` in a variable named `i` and displays it with the hero name like this. @@ -1511,8 +1511,8 @@ The next example captures the `index` in a variable named `i` and displays it wi
-Learn about the other `NgFor` context values such as `last`, `even`, -and `odd` in the [NgFor API reference](api/common/NgFor). +Learn about the other `NgForOf` context values such as `last`, `even`, +and `odd` in the [NgForOf API reference](api/common/NgForOf).
@@ -1520,7 +1520,7 @@ and `odd` in the [NgFor API reference](api/common/NgFor). #### *ngFor with _trackBy_ -The `NgFor` directive may perform poorly, especially with large lists. +The `NgForOf` directive may perform poorly, especially with large lists. A small change to one item, an item removed, or an item added can trigger a cascade of DOM manipulations. For example, re-querying the server could reset the list with all new hero objects. @@ -1531,7 +1531,7 @@ But Angular sees only a fresh list of new object references. It has no choice but to tear down the old DOM elements and insert all new DOM elements. Angular can avoid this churn with `trackBy`. -Add a method to the component that returns the value `NgFor` _should_ track. +Add a method to the component that returns the value `NgForOf` _should_ track. In this case, that value is the hero's `id`. diff --git a/packages/common/src/common.ts b/packages/common/src/common.ts index 5e79a49ad1..afa7c0e9cf 100644 --- a/packages/common/src/common.ts +++ b/packages/common/src/common.ts @@ -15,7 +15,7 @@ export * from './location/index'; export {NgLocaleLocalization, NgLocalization} from './localization'; export {parseCookieValue as ɵparseCookieValue} from './cookie'; export {CommonModule, DeprecatedI18NPipesModule} from './common_module'; -export {NgClass, NgFor, NgForOf, NgForOfContext, NgIf, NgIfContext, NgPlural, NgPluralCase, NgStyle, NgSwitch, NgSwitchCase, NgSwitchDefault, NgTemplateOutlet, NgComponentOutlet} from './directives/index'; +export {NgClass, NgForOf, NgForOfContext, NgIf, NgIfContext, NgPlural, NgPluralCase, NgStyle, NgSwitch, NgSwitchCase, NgSwitchDefault, NgTemplateOutlet, NgComponentOutlet} from './directives/index'; export {DOCUMENT} from './dom_tokens'; export {AsyncPipe, DatePipe, I18nPluralPipe, I18nSelectPipe, JsonPipe, LowerCasePipe, CurrencyPipe, DecimalPipe, PercentPipe, SlicePipe, UpperCasePipe, TitleCasePipe} from './pipes/index'; export {PLATFORM_BROWSER_ID as ɵPLATFORM_BROWSER_ID, PLATFORM_SERVER_ID as ɵPLATFORM_SERVER_ID, PLATFORM_WORKER_APP_ID as ɵPLATFORM_WORKER_APP_ID, PLATFORM_WORKER_UI_ID as ɵPLATFORM_WORKER_UI_ID, isPlatformBrowser, isPlatformServer, isPlatformWorkerApp, isPlatformWorkerUi} from './platform_id'; diff --git a/packages/common/src/common_module.ts b/packages/common/src/common_module.ts index 4a75bb4f39..4908dcd36c 100644 --- a/packages/common/src/common_module.ts +++ b/packages/common/src/common_module.ts @@ -8,7 +8,7 @@ import {NgModule} from '@angular/core'; -import {COMMON_DEPRECATED_DIRECTIVES, COMMON_DIRECTIVES} from './directives/index'; +import {COMMON_DIRECTIVES} from './directives/index'; import {NgLocaleLocalization, NgLocalization} from './localization'; import {COMMON_PIPES} from './pipes/index'; diff --git a/packages/common/src/directives/index.ts b/packages/common/src/directives/index.ts index b78d57678c..c2dcabe37d 100644 --- a/packages/common/src/directives/index.ts +++ b/packages/common/src/directives/index.ts @@ -10,7 +10,7 @@ import {Provider} from '@angular/core'; import {NgClass} from './ng_class'; import {NgComponentOutlet} from './ng_component_outlet'; -import {NgFor, NgForOf, NgForOfContext} from './ng_for_of'; +import {NgForOf, NgForOfContext} from './ng_for_of'; import {NgIf, NgIfContext} from './ng_if'; import {NgPlural, NgPluralCase} from './ng_plural'; import {NgStyle} from './ng_style'; @@ -20,7 +20,6 @@ import {NgTemplateOutlet} from './ng_template_outlet'; export { NgClass, NgComponentOutlet, - NgFor, NgForOf, NgForOfContext, NgIf, @@ -53,8 +52,3 @@ export const COMMON_DIRECTIVES: Provider[] = [ NgPlural, NgPluralCase, ]; - -/** - * A collection of deprecated directives that are no longer part of the core module. - */ -export const COMMON_DEPRECATED_DIRECTIVES: Provider[] = [NgFor]; diff --git a/packages/common/src/directives/ng_for_of.ts b/packages/common/src/directives/ng_for_of.ts index 1441567502..e1137234c7 100644 --- a/packages/common/src/directives/ng_for_of.ts +++ b/packages/common/src/directives/ng_for_of.ts @@ -199,16 +199,6 @@ class RecordViewTuple { constructor(public record: any, public view: EmbeddedViewRef>) {} } -/** - * @deprecated from v4.0.0 - Use NgForOf instead. - */ -export type NgFor = NgForOf; - -/** - * @deprecated from v4.0.0 - Use NgForOf instead. - */ -export const NgFor = NgForOf; - export function getTypeNameForDebugging(type: any): string { return type['name'] || typeof type; } diff --git a/packages/common/test/directives/ng_for_spec.ts b/packages/common/test/directives/ng_for_spec.ts index 19ae6c7f41..ecc6725b98 100644 --- a/packages/common/test/directives/ng_for_spec.ts +++ b/packages/common/test/directives/ng_for_spec.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.io/license */ -import {CommonModule, NgFor, NgForOf} from '@angular/common'; +import {CommonModule, NgForOf} from '@angular/common'; import {Component, Directive} from '@angular/core'; import {ComponentFixture, TestBed, async} from '@angular/core/testing'; import {By} from '@angular/platform-browser/src/dom/debug/by'; @@ -29,7 +29,7 @@ export function main() { beforeEach(() => { TestBed.configureTestingModule({ - declarations: [TestComponent, TestDirective], + declarations: [TestComponent], imports: [CommonModule], }); }); @@ -358,14 +358,6 @@ export function main() { getComponent().items = ['e', 'f', 'h']; detectChangesAndExpectText('efh'); })); - - it('should support injecting `NgFor` and get an instance of `NgForOf`', async(() => { - const template = ``; - fixture = createTestComponent(template); - const testDirective = fixture.debugElement.childNodes[0].injector.get(TestDirective); - const ngForOf = fixture.debugElement.childNodes[0].injector.get(NgForOf); - expect(testDirective.ngFor).toBe(ngForOf); - })); }); }); } @@ -383,11 +375,6 @@ class TestComponent { trackByContext(): void { thisArg = this; } } -@Directive({selector: '[test]'}) -class TestDirective { - constructor(public ngFor: NgFor) {} -} - const TEMPLATE = '
{{item.toString()}};
'; function createTestComponent(template: string = TEMPLATE): ComponentFixture { diff --git a/packages/core/src/change_detection/differs/iterable_differs.ts b/packages/core/src/change_detection/differs/iterable_differs.ts index 94bd9e4f80..3412534642 100644 --- a/packages/core/src/change_detection/differs/iterable_differs.ts +++ b/packages/core/src/change_detection/differs/iterable_differs.ts @@ -17,7 +17,7 @@ import {Optional, SkipSelf, StaticProvider} from '../../di'; export type NgIterable = Array| Iterable; /** - * A strategy for tracking changes over time to an iterable. Used by {@link NgFor} to + * A strategy for tracking changes over time to an iterable. Used by {@link NgForOf} to * respond to changes in an iterable by effecting equivalent changes in the DOM. * * @stable diff --git a/tools/public_api_guard/common/common.d.ts b/tools/public_api_guard/common/common.d.ts index 7efcf8de3d..00dc54a043 100644 --- a/tools/public_api_guard/common/common.d.ts +++ b/tools/public_api_guard/common/common.d.ts @@ -153,9 +153,6 @@ export declare class NgComponentOutlet implements OnChanges, OnDestroy { ngOnDestroy(): void; } -/** @deprecated */ -export declare const NgFor: typeof NgForOf; - /** @stable */ export declare class NgForOf implements DoCheck, OnChanges { ngForOf: NgIterable;