App Layout with AngularDart does not show Item on Drawer

Question

I am trying reproduce the following App Layout Demo (app_layout_demo) example:

https://github.com/dart-lang/angular_components_example/tree/master/lib/src/app_layout_demo

There are these items that should appear in the drawer:

<material-drawer persistent #drawer="drawer" [attr.end]="end ? '' : null">
  <material-list *deferredContent>
    <div group class="mat-drawer-spacer"></div>
    <div group>
      <material-list-item>
        <material-icon icon="inbox"></material-icon>Inbox
      </material-list-item>
      <material-list-item>
        <material-icon icon="star"></material-icon>Star
      </material-list-item>
      <material-list-item>
        <material-icon icon="send"></material-icon>Sent Mail
      </material-list-item>
      <material-list-item>
        <material-icon icon="drafts"></material-icon>Drafts
      </material-list-item>
    </div>
    <div group>
      <div label>Tags</div>
      <material-list-item>
        <material-icon icon="star"></material-icon>Favorites
      </material-list-item>
    </div>
  </material-list>
</material-drawer>

But it does not show Item on Drawer. See:

There is also an error in the browser console:

EXCEPTION: Invalid argument(s): No provider found for DomService. html_dart2js.dart:3559

What could be the problem?

Answer 1

The error message means that materialProviders is missing

import 'package:angular_components/angular_components.dart';

@Component(
  selector: 'my-app',
  providers: [materialProviders],

they only need to be provided once for the whole application, therefore AppComponent is the best place.

Answer 2

Note that if you're running a newer version of the AngularDart examples (e.g. 5.0) and you're seeing the same error (No provider found for DomService.), you may find that you need to add the following import:

import 'package:angular_components/laminate/popup/module.dart';

And the following to your root Component (as Günter mentions):

@Component(
  selector: 'my-app',
  providers: const [popupBindings]

As per: https://github.com/dart-lang/angular_components_example/blob/master/lib/app_component.dart#L64

UPDATE:

However, if you do want to import the materialProviders - as per accepted answer - simply add the following import:

import 'package:angular_components/angular_components.dart';

And add the following to your root Component:

@Component(
  selector: 'my-app',
  providers: const [materialProviders]