Skip to content
Permalink
Browse files

refactor(common): remove deprecated `NgFor` (#18758)

BREAKING CHANGE: `NgFor` has been removed as it was deprecated since v4. Use `NgForOf` instead. This does not impact the use of`*ngFor` in your templates.

PR Close #18758
  • Loading branch information...
ocombe authored and mhevery committed Aug 17, 2017
1 parent 7ce9e06 commit ec56760c9ba530ee98117f9dd451b43c28d6de67
@@ -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.
@@ -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

<hr/>

@@ -1437,18 +1437,18 @@ described below.

{@a ngFor}

### NgFor
### NgForOf

`NgFor` is a _repeater_ directive &mdash; a way to present a list of items.
`NgForOf` is a _repeater_ directive &mdash; 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 `<div>`:
Here is an example of `NgForOf` applied to a simple `<div>`:

<code-example path="template-syntax/src/app/app.component.html" region="NgFor-1" title="src/app/app.component.html" linenums="false">
</code-example>

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:

<code-example path="template-syntax/src/app/app.component.html" region="NgFor-2" title="src/app/app.component.html" linenums="false">
</code-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 `<hero-detail>` 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,16 +1511,16 @@ The next example captures the `index` in a variable named `i` and displays it wi
<div class="l-sub-section">
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).
</div>
{@a trackBy}
#### *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`.

<code-example path="template-syntax/src/app/app.component.ts" region="trackByHeroes" title="src/app/app.component.ts" linenums="false">
@@ -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';
@@ -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';

@@ -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];
@@ -199,16 +199,6 @@ class RecordViewTuple<T> {
constructor(public record: any, public view: EmbeddedViewRef<NgForOfContext<T>>) {}
}

/**
* @deprecated from v4.0.0 - Use NgForOf<any> instead.
*/
export type NgFor = NgForOf<any>;

/**
* @deprecated from v4.0.0 - Use NgForOf instead.
*/
export const NgFor = NgForOf;

export function getTypeNameForDebugging(type: any): string {
return type['name'] || typeof type;
}
@@ -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 = `<ng-template ngFor [ngForOf]='items' let-item test></ng-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 = '<div><span *ngFor="let item of items">{{item.toString()}};</span></div>';

function createTestComponent(template: string = TEMPLATE): ComponentFixture<TestComponent> {
@@ -17,7 +17,7 @@ import {Optional, SkipSelf, StaticProvider} from '../../di';
export type NgIterable<T> = Array<T>| Iterable<T>;

/**
* 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
@@ -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<T> implements DoCheck, OnChanges {
ngForOf: NgIterable<T>;

0 comments on commit ec56760

Please sign in to comment.
You can’t perform that action at this time.