Which directives do I need to import to use material-list-item?

Question

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.

Answer 1

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?