Confused about Angular Material

help
1

I’m a bit confused about using Material with Angular 2 and Meteor. I realize that Material is not released for Angular 2, but at the same time part 18 of the Socially tutorial shows how to use it. Is this chapter premature, a case of caveat emptor?

In particular, I have some questions:

  1. The tutorial uses a mix of HTML elements like <md-button> and attributes like md-button. Is there a reason for this? Is one approach preferred over the other?
  2. For those components not yet implemented (like autocomplete), what’s the best way to implement a replacement? JQuery, something else?
  3. Would it just be better to go back to Bootstrap for a current project (already started, not 6 months from now)?

Thanks.

2

I’ve used angular1-material and have read a bit about angular2-material which seems to be more flexible than the first one.

I prefer using the custom elements like <md-button> instead of using it as an attribute, it feels more natural for me but I really don’t know what are the cons/pros of using it as an attribute instead as from what I understand they do almost the same thing.

From what I’ve experienced in the past year, I love the material design, but sometimes I feel like using bootstrap would of save me time where angular-material had bugs and not as flexible, like datatables, as bootstrap. You could just install a material design with bootstrap and develop faster there.

As for autocomplete, the autocomplete that angular1-material offers is very complete and I would say that it is one of the best out there, but it’s very difficult to implement in my opinion. Hopefully they fix that in angular2-material.

3

First, I’ve just updated chapter 18 specifically 5 minutes ago so please it check out again.

About other libraries, there are a few, I don’t remember currently but I’m sure some googling will get you some extra libraries for material and Angular.

4

@Urigo Thanks for the reply. I found it a bit difficult to understand what you’d changed, but it appears you’ve changed some of the HTML to use elements like <md-button>. This helps me understand what I should be doing, but see another reply from me in a bit.

5

@jsantana Thanks for your reply. Your suggestion about finding a material design/bootstrap package was a good idea - I didn’t realize they existed. And I think I’m moving more towards your view of material design. But see the next reply.

6

I’ve had some time to think and research since my original comments. Perhaps I’m still a bit confused, but I may be able to state my desires and concerns more clearly. Please help me understand better if I’ve gotten something wrong.

There were several reasons I originally picked meteor for my project. It combines a Angular2/Ionic2/Cordova core of functionality with some additional functions like authentication. These are capabilities I could build on my own, but then again I’m not part of a large development team. I freely admit I’d prefer someone else implement some of the hard parts. And finally, mobile solutions for IOS and Android are critical to the project’s success.

I think I’m starting to understand the impact of the different packages on what I need to do for a successful project. First, there is the split between web and mobile. The tutorial introduces the idea of creating two different sets of HTML (and initialization), one for the web application and one for the mobile apps. This makes sense from the Ionic/Cordova side, since the Ionic HTML elements are used to generate the native mobile apps. While the web app could also be generated by Ionic, I assume adding another layer would impact performance. It’s a reasonable tradeoff that doesn’t greatly impact development.

The second impact of the packages is on layout. When I originally asked about Angular Material, I was concentrating on layout. And because of the web/mobile split I mentioned above, this is primarily for the web side. A good deal of the mobile layout will be dictated by the Ionic HTML elements, as well as the native components.

Finally, there are the user interface components. Again, for mobile you’re limited to native components or elements that are composed of native components. For web, you have behaviors created by a combination of CSS and JavaScript. The more complicated the behavior, the more likely there’s JavaScript lurking the in the background. And complicated behavior in UI elements means I’d much rather someone else implement the primitives I use to construct my application.

So these impacts bring us to the question of using a package like Angular Material, combining layout and user interface elements, and therefore CSS and JavaScript. When I first looked and Angular Material, the simplicity of layout and styling was appealing. In addition, the UI elements seemed to be everything I needed (including mobile, which I ruled out above). But then I took a closer look and realized many of the UI elements are not implemented yet for Angular 2 (autocomplete was simply an example). Ouch. The other candidate packages have similar issues.

What are my choices? I could concentrate on mobile while waiting for one of the packages to implement what I need, augment the layout side of a package with a more complete UI element package (like PrimeNg), or create my own missing UI elements. I’m leaning towards the last option and doing some prototypes.