Static members of component not accessible in HTML templates

[stevenroose]

Forwarded from angular/angular: angular/angular#22345
Seems to collide with: #374

I'm submitting a...

• Feature request

Current behavior

@Component(
  [...]
  template: '''<div *ngFor="let element of elementsToShow">{{element}}</div>'''
  directives: [CORE_DIRECTIVES],
)
class MyComponent {
  static final List<String> elementsToShow = ["one", "two", "three"];
}

Currently throws an error:

EXCEPTION: NoSuchMethodError: method not found: 'get$elementsToShow' (_ctx.get$elementsToShow is not a function)

Expected behavior

The static member elementsToShow is accessible just like a non-static class member.

Minimal reproduction of the problem with instructions

See current behavior.

What is the motivation / use case for changing the behavior?

Static members are intended for members that are the same for every instance of the class. Using Angular should not force the user to move those to a non-static member, or force the creation of a non-static getter to forward this variable.

Environment

environment:
  sdk: '>=1.24.0 <2.0.0'

dependencies:
  http: ^0.11.3+16
  logging: ^0.11.3+1
  path: ^1.5.1
  angular: ^4.0.0
  angular_forms: ^1.0.0
  angular_components: ^0.8.0
  stream_transform: ^0.0.6
  ng_bootstrap: any
  cookie: ^0.0.4
  intl: ^0.15.2

Angular version: 4.0.0+2 (Dart)

Browser:

• Chrome (desktop) version 64.0.3282.85 (Official Build) beta (64-bit)

For Tooling issues:

• Platform: Arch Linux AMD64

[matanlurey]

As of I (believe) 4.0.0 this is supported:

*   Added `exports: [ ... ]` to `@Component`, which allows the limited use of
    top-level fields and static methods/fields in a template without making an
    alias getter in your class. Implements
    [#374](https://github.com/dart-lang/angular/issues/374).

```dart
import 'dart:math' show max;

@Component(
  selector: 'comp',
  exports: const [
    max,
  ],
  // Should write '20'
  template: '{{max(20, 10)}}',
)
class Comp {}

You can see some examples in our test cases:
https://github.com/dart-lang/angular/blob/1abcb5c62fc8a8267f1abdb2081d07f40567c56f/_tests/test/compiler/exports_test.dart#L118-L234

If this isn't documented (/cc @chalin @kwalrath) we can improve that.

For your specific case, you don't need to use exports, but can write:

'''<div *ngFor="let element of MyComponent.elementsToShow">{{element}}</div>'''