0

I'm migrating an application to Dart 2 and Angular 5. I have this code in an html file

<material-list-item *ngFor="let key of keyList" 
    (trigger)="clickItem(key)">{{key}}
</material-list-item>

Everything works if I declare the use of 'materialDirectives' in the corresponding dart file, but if I only import 'MaterialListItemComponent', the click on the item is not triggered.

I actually tried to add a couple more directives, but using the following list does not work:

MaterialButtonComponent,
MaterialIconComponent,
MaterialDialogComponent,
MaterialListComponent, 
MaterialListItemComponent,
MaterialInputComponent,
MaterialPopupComponent,
ModalComponent,
PopupSourceDirective,
ButtonDirective.

materialDirectives is deprecated and I don't wan't to include everything if not necessary. Looking for an answer to this question but also for a way to identify which directives are used by different components.

Bostone
  • 36,858
  • 39
  • 167
  • 227
Tamas
  • 89
  • 7
  • Is there an error in your code? It looks like it is missing a quote to close your ngFor but I'm not sure if this is just a typo. From what you have it looks like it should work, with the quote, and a very similar piece of code works with angular_components_example. Without more context I can't help. – Ted Sander Aug 16 '18 at 06:02
  • Hi, the missing quote is just a copy paste error from my source... but good catch. Are you referring to the following example page? https://dart-lang.github.io/angular_components_example/#material_list I can see the source code but there's no examples on this page. – Tamas Aug 16 '18 at 20:21
  • Thanks for pointing out the missing demo. I'll get that fixed. I just dropped your code snippet into the demo and it worked fine. The example file is in the repo already though so you compare it with your project. https://github.com/dart-lang/angular_components_example/blob/master/example/material_list_example/lib/material_list_demo.dart – nshahan Aug 17 '18 at 22:14

1 Answers1

2

MaterialListItemComponent extends ButtonDirective which has the logic for trigger. So that should be all you need. Along with NgFor for just the code in your example.

The demo which is similar to your code uses:

FocusItemDirective,
FocusListDirective,
MaterialIconComponent,
MaterialListComponent,
MaterialListItemComponent,
MaterialSelectItemComponent,
NgFor

Is there any runtime errors?

Ted Sander
  • 1,899
  • 8
  • 11
  • Thanks for the help. Unfortunately the click is still not triggered after merging my list with yours. There are no errors on the console. – Tamas Aug 15 '18 at 14:31