Components: Create tutorial on building an Angular Material app

[nasht00]

The Getting Started guide explains how to install and setup angular-material. But not really how to get started. What's next? How do I "use" it?

Does it assume you already know how to use Material? If so, it should say so.

Does it work the same way as vanilla Material? What does this integration do? What's different?

[ngmgit]

It already has a documentation. And I think demo app covers most of the stuff to get started with using different components of material, search the demo-app folder inside src of this repo.
And demo app also make it clear on how we can import it into our app if you are new to angular 2.

[andrewseguin]

We could probably add one more step that shows what it's like to add a material button. For your case, check out any of the components listed on material.angular.io, e.g. <button md-raised-button>Raised button</button>

[jelbourn]

I would call what your thinking of a "tutorial", separate from the existing set-up guide.

[julianobrasil]

In fact, the basic usage examples are good enough, in my opinion, but for who is already familiar to Material programming style. But it would be better to have a step-by-step for who is learning the library (maybe a tour aiming to build up a basic form from scratch with some basic components).

By the way the docs pages already have an EXAMPLES tab for every component. Add more examples there.

In the future maybe something related to the "Tour of heroes" of the angular docs would be something to consider.

[willshowell]

Though I haven't worked through it, the starter repo/tutorial that @EladBezalel and @DevVersion put together looks like a really good introduction

quickstart repo

ng-conf workshop

[julianobrasil]

@willshowell, very nice. They should put a link to it on the get started page at the docs site.

[julianobrasil]

I followed the the quickstart partially yesterday. It needs at least one minor update: the import of MaterialModule needs to be replaced by the individual imports of the used modules.

[EladBezalel]

@julianobrasil yeah, we didn't had individual imports at the time we released the tutorial,
If you will, open an issue over there so we can keep track on that :)

[LayneRobinson]

@julianobrasil the Plunker examples on each component page still reference the MaterialModule. The example app does too. So does the Angular Connect 2016 Demo. So, they might be "good enough" if they were following the preferred approach, they aren't currently "good enough".

I'm trying to get my app started and getting "xxx" is not a known element, even though I'm importing EVERY SINGLE MODULE. So working examples that use the current approach would be nice. As would a document along the lines of the Tour of Heroes documentation.

I'm not unfamiliar with Angular 4, but I'm trying to switch from Bootstrap to Angular Material.

[julianobrasil]

@LayneRobinson , I wrote "_good enough (...) for who is already familiar to Material_". :relaxed: For who is starting it is (very) important to update the plunkers.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}