zero_coding zero_coding - 24 days ago 14
Dart Question

How to use angular2_components

Can someone please tell me, how to use angular2_components?
I've tried as follow:

<material-button>Test</material-button>


But it does not show a button as expected.

Update
What I did:

The pubspec yaml:

dependencies:
angular2: ^2.0.0
angular2_components: ^0.1.0
dev_dependencies:
browser: ^0.10.0
dart_to_js_script_rewriter: ^1.0.1
transformers:
- angular2:
platform_directives:
- 'package:angular2/common.dart#COMMON_DIRECTIVES'
platform_pipes:
- 'package:angular2/common.dart#COMMON_PIPES'
entry_points: web/main.dart


the app_component.dart:

import 'package:angular2/core.dart';
import 'package:angular2_components/angular2_components.dart';

@Component(
selector: 'my-app',
directives: const[
MaterialButtonComponent,
],
styleUrls: const ['app_component.css'],
templateUrl: 'app_component.html')
class AppComponent {}


The the button still looks like:
enter image description here

and also got error messages:
enter image description here

What am I doing wrong?

Answer

You need to add

dependencies:
  angular2_components: ^0.1.1

to your pubspec.yaml file and run pub get.

Then you need to import MaterialButtonComponent

import 'package:angular2_components/angular2_components.dart'
    show MaterialButtonComponent, materialProviders; // the show Xxx is optional

and then add it to @Directives() of the component where you want to use it

@Component(
  selector: 'my-app',
  directives: const [
    MaterialButtonComponent,
  ],
  providers: [materialProviders],
  ...
)

For more details see https://dart-lang.github.io/angular2_components_example/ and https://github.com/dart-lang/angular2_components_example/blob/master/lib/app_component.html

Comments