Creating a simple button with angular2 dart and angular2_material

Question

I generated an angular2 dart app with stagehand and it run as expected. Now I am trying to add a simple button from angular2-material-design to the page but not with any success. Only the button label is displayed - the button is not seen raised as expected. Below are the simple src

.dart

library angular2_app.app_component;

import 'package:angular2/angular2.dart';

import 'package:angular2_material/src/components/button/button.dart';

@Component( selector: 'my-app', templateUrl: 'app_component.html' )
class AppComponent {}

.html

<h1>My First Angular 2 App</h1>

<md-content>
  <section layout = "row"
           layout-sm = "column"
           layout-align = "center center"
           layout-wrap>
    <md-button class = "md-raised">Button</md-button>
  </section>
</md-content>

Here the raised button is not seen.

Any help is appreciated.

What is md-content? I couldn't find it in angular2_material. — Günter Zöchbauer
– Günter Zöchbauer, Commented Dec 10, 2015 at 7:10
Experimenting - found it at material.angularjs.org/latest/demo/button — st_clair_clarke
– st_clair_clarke, Commented Dec 10, 2015 at 10:10

Günter Zöchbauer · Accepted Answer · 2015-12-10 10:35:14Z

1

The selector of the MdButton component is [md-button].not(a) (and some variants) which means the element needs to have an attribute md-button and not that the element has to be <md-button>. This way any element can become an md-button by adding this attribute.

Change the tag to

<div md-button>Button</div>

or

<div md-raised-button>Button</div>

or

<a md-raised-button>Button</a>

Also directives used in the template need to be registered with the component

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

The Angular2 material components are not intended to be used at this time AFAIK and highly experimental but it's of course fine to experiment with them.

edited Dec 10, 2015 at 10:35

answered Dec 10, 2015 at 7:42

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

st_clair_clarke Over a year ago

Still none of the above creates a button - just text. Just experimenting. Maybe the imports are incorrect. I tried experimenting because of the blog at news.dartlang.org/2015/11/…. Just wondering why Google seems to support angular more than polymer though.

Günter Zöchbauer Over a year ago

I forgot to mention that you need to add directives: const [MdButton] to your @Component() annotation.

Günter Zöchbauer Over a year ago

Not sure what you mean by "Google supports Angular more than Polymer"

st_clair_clarke Over a year ago

Thanks Gunter. The directive was the missing part. I am not trying to open a can of worms but the few times I have seen a mention of Google using angular vs dart-polymer, angular seems to be there choice. Maybe those with internal knowledge/info know better.

Günter Zöchbauer Over a year ago

I guess in relation to Dart, Angular is clearly favored over Polymer. Polymer is basically for building reusable components, and building them in JS makes them more reusable than building them in Dart. Even though Polymer is great to build whole, also complex, applications, it's not its main goal. Angulars primary purpose is to make it easy to build complex applications, that's also the main goal of Dart therefore they are a prefect fit.

|

Collectives™ on Stack Overflow

Creating a simple button with angular2 dart and angular2_material

.dart

.html

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

.dart

.html

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related