Whitespace in let x1 = index causes silent failures.

[jimmyff]

I'm using alpha5 + DDC. This directive worked fine with Angular4 + pub.

The directive with selector [gridCell] @Input() never gets called/set when provided with index values from *ngFor. If I hardcode numbers instead of providing x1 & y1 then the @Input() gets successfully called/set.

Component template:

<div *ngFor="let row of getRows(); let y1 = index ">
  <div *ngFor="let col of getCols(y1); let x1 = index ">
    <div [x]="x1" [y]="y1" gridCell></div>
  </div>
</div>

The directive is definitely loaded, I have it printing a message on construct. I also have simplified it so it's a barebones directive, it literally just prints debug on construct and when x or y is set.

[matanlurey]

Thanks! I'll take a look.

[matanlurey]

**EDIT**: Just a mistake on my part.

```
Template parse errors:
line 3, column 12 of UsesNgFor: ParseErrorLevel.FATAL: Can't bind to 'x' since it isn't a known native property or known directive. Please fix typo or add to directives list.
      <div [x]="x1" [y]="y1" gridCell></div>
           ^^^^^^^^
line 3, column 21 of UsesNgFor: ParseErrorLevel.FATAL: Can't bind to 'y' since it isn't a known native property or known directive. Please fix typo or add to directives list.
      <div [x]="x1" [y]="y1" gridCell></div>
```

[jimmyff]

Hi @matanlurey - I've created a bare bones project here showing the issue:
ngfor-directive-issue-example.zip

[matanlurey]

@jimmyff I'm getting a pass with a similar setup:

@TestOn('browser')
import 'dart:html';
import 'package:angular/angular.dart';
import 'package:angular_test/angular_test.dart';
import 'package:test/test.dart';

import '880_ng_for_input_test.template.dart' as ng_generated;

void main() {
  tearDown(disposeAnyRunningTest);

  test('should support directive inputs from an ngFor index', () async {
    final testBed = NgTestBed.forComponent<UsesNgFor>(
      ng_generated.UsesNgForNgFactory,
    );
    final fixture = await testBed.create();
    expect(fixture.text, '(0, 0)(1, 0)(0, 1)(1, 1)');
  });
}

@Component(
  selector: 'uses-ng-for',
  directives: const [
    GridCell,
    NgFor,
  ],
  template: r'''
    <div *ngFor="let row of getRows(); let y1 = index">
     <div *ngFor="let col of getCols(y1); let x1 = index">
      <div gridCell [x]="x1" [y]="y1"></div>
     </div>
    </div>
  ''',
)
class UsesNgFor {
  List<String> getRows() => const ['a', 'b'];
  List<String> getCols(int index) => const ['1', '2'];
}

@Directive(
  selector: '[gridCell]',
)
class GridCell implements AfterChanges {
  final Element _element;

  GridCell(this._element);

  @Input()
  int x;

  @Input()
  int y;

  @override
  void ngAfterChanges() {
    _element.text = '($x, $y)';
  }
}

[matanlurey]

Do you see anything silly different?

[jimmyff]

omg -it's the whitespace after the word index!!

Fails:

<div *ngFor="let row of getRows(); let y1 = index ">
    <div *ngFor="let col of getCols(y1); let x1 = index ">
      <div [x]="x1" [y]="y1" gridCell></div>
    </div>
  </div>

Passes:

<div *ngFor="let row of getRows(); let y1 = index">
    <div *ngFor="let col of getCols(y1); let x1 = index">
      <div [x]="x1" [y]="y1" gridCell></div>
    </div>
  </div>

That is a horrible gotcha!

[matanlurey]

I think we can handle this with a simple .trimRight() for now.

[matanlurey]

Fixed in #1565!