Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion modules/@angular/common/src/common.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
*/
export * from './location/index';
export {NgLocaleLocalization, NgLocalization} from './localization';
export {CommonModule, DeprecatedCommonModule} from './common_module';
export {CommonModule} from './common_module';
export {NgClass, NgFor, NgForOf, NgIf, NgPlural, NgPluralCase, NgStyle, NgSwitch, NgSwitchCase, NgSwitchDefault, NgTemplateOutlet, NgComponentOutlet} from './directives/index';
export {AsyncPipe, DatePipe, I18nPluralPipe, I18nSelectPipe, JsonPipe, LowerCasePipe, CurrencyPipe, DecimalPipe, PercentPipe, SlicePipe, UpperCasePipe, TitleCasePipe} from './pipes/index';
export {VERSION} from './version';
9 changes: 0 additions & 9 deletions modules/@angular/common/src/common_module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -29,12 +29,3 @@ import {COMMON_PIPES} from './pipes/index';
})
export class CommonModule {
}

/**
* A module to contain deprecated directives.
*
* @deprecated
*/
@NgModule({declarations: [COMMON_DEPRECATED_DIRECTIVES], exports: [COMMON_DEPRECATED_DIRECTIVES]})
export class DeprecatedCommonModule {
}
77 changes: 9 additions & 68 deletions modules/@angular/common/src/directives/ng_for_of.ts
Original file line number Diff line number Diff line change
Expand Up @@ -85,12 +85,8 @@ export class NgForOfRow<T> {
*
* @stable
*/
@Directive({
selector: '[ngFor][ngForOf]',
providers: [{provide: forwardRef(() => NgFor), useExisting: forwardRef(() => NgForOf)}]
})
export class NgForOf<T> implements DoCheck,
OnChanges {
@Directive({selector: '[ngFor][ngForOf]'})
export class NgForOf<T> implements DoCheck, OnChanges {
@Input() ngForOf: NgIterable<T>;
@Input()
set ngForTrackBy(fn: TrackByFunction<T>) {
Expand Down Expand Up @@ -191,66 +187,11 @@ class RecordViewTuple<T> {
}

/**
* The `NgFor` directive instantiates a template once per item from an iterable. The context
* for each instantiated template inherits from the outer context with the given loop variable
* set to the current item from the iterable.
*
* ### Local Variables
*
* `NgFor` provides several exported values that can be aliased to local variables:
*
* * `index` will be set to the current loop iteration for each template context.
* * `first` will be set to a boolean value indicating whether the item is the first one in the
* iteration.
* * `last` will be set to a boolean value indicating whether the item is the last one in the
* iteration.
* * `even` will be set to a boolean value indicating whether this item has an even index.
* * `odd` will be set to a boolean value indicating whether this item has an odd index.
*
* ### Change Propagation
*
* When the contents of the iterator changes, `NgFor` makes the corresponding changes to the DOM:
*
* * When an item is added, a new instance of the template is added to the DOM.
* * When an item is removed, its template instance is removed from the DOM.
* * When items are reordered, their respective templates are reordered in the DOM.
* * Otherwise, the DOM element for that item will remain the same.
*
* Angular uses object identity to track insertions and deletions within the iterator and reproduce
* those changes in the DOM. This has important implications for animations and any stateful
* controls (such as `<input>` elements which accept user input) that are present. Inserted rows can
* be animated in, deleted rows can be animated out, and unchanged rows retain any unsaved state
* such as user input.
*
* It is possible for the identities of elements in the iterator to change while the data does not.
* This can happen, for example, if the iterator produced from an RPC to the server, and that
* RPC is re-run. Even if the data hasn't changed, the second response will produce objects with
* different identities, and Angular will tear down the entire DOM and rebuild it (as if all old
* elements were deleted and all new elements inserted). This is an expensive operation and should
* be avoided if possible.
*
* To customize the default tracking algorithm, `NgFor` supports `trackBy` option.
* `trackBy` takes a function which has two arguments: `index` and `item`.
* If `trackBy` is given, Angular tracks changes by the return value of the function.
*
* ### Syntax
*
* - `<li *ngFor="let item of items; let i = index; trackBy: trackByFn">...</li>`
* - `<li template="ngFor let item of items; let i = index; trackBy: trackByFn">...</li>`
*
* With `<template>` element:
*
* ```
* <template ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByFn">
* <li>...</li>
* </template>
* ```
*
* ### Example
*
* See a [live demo](http://plnkr.co/edit/KVuXxDp0qinGDyo307QW?p=preview) for a more detailed
* example.
*
* @deprecated v4.0.0 - Use `NgForOf<T>` instead.
* @deprecated from v4.0.0 - Use NgForOf<any> instead.
*/
export type NgFor = NgForOf<any>;

/**
* @deprecated from v4.0.0 - Use NgForOf instead.
*/
export class NgFor extends NgForOf<any> {}
export const NgFor = NgForOf;
19 changes: 16 additions & 3 deletions modules/@angular/common/test/directives/ng_for_spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
* found in the LICENSE file at https://angular.io/license
*/

import {CommonModule} from '@angular/common';
import {Component} from '@angular/core';
import {CommonModule, NgFor, 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';
import {expect} from '@angular/platform-browser/testing/matchers';
Expand All @@ -29,7 +29,7 @@ export function main() {

beforeEach(() => {
TestBed.configureTestingModule({
declarations: [TestComponent],
declarations: [TestComponent, TestDirective],
imports: [CommonModule],
});
});
Expand Down Expand Up @@ -350,6 +350,14 @@ export function main() {
getComponent().items = ['e', 'f', 'h'];
detectChangesAndExpectText('efh');
}));

it('should support injecting `NgFor` and get an instance of `NgForOf`', async(() => {
const template = `<template ngFor [ngForOf]='items' let-item test></template>`;
fixture = createTestComponent(template);
const testDirective = fixture.debugElement.childNodes[0].injector.get(TestDirective);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

const testDirective = fixture.debugElement.query(By.directive(TestDirective));

Why not inject both in the td ?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Both?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also query seems to return the DebugElement and not TestDirective

const ngForOf = fixture.debugElement.childNodes[0].injector.get(NgForOf);
expect(testDirective.ngFor).toBe(ngForOf);
}));
});
});
}
Expand All @@ -367,6 +375,11 @@ 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> {
Expand Down
7 changes: 1 addition & 6 deletions tools/public_api_guard/common/typings/common.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -32,10 +32,6 @@ export declare class DecimalPipe implements PipeTransform {
transform(value: any, digits?: string): string;
}

/** @deprecated */
export declare class DeprecatedCommonModule {
}

/** @stable */
export declare class HashLocationStrategy extends LocationStrategy {
constructor(_platformLocation: PlatformLocation, _baseHref?: string);
Expand Down Expand Up @@ -135,8 +131,7 @@ export declare class NgComponentOutlet implements OnChanges, OnDestroy {
}

/** @deprecated */
export declare class NgFor extends NgForOf<any> {
}
export declare const NgFor: typeof NgForOf;

/** @stable */
export declare class NgForOf<T> implements DoCheck, OnChanges {
Expand Down