Why does the angular-material `Getting Started` example not actually work?

Question

Is it just me, or is the angular-material "Getting Started" example broken?

On that page (link above), there's an inline codepen to show using angular-material. But the demo doesn't work! (In particular, I don't see a button to collapse the sidebar.)

Since I used this example in my started project, I spent quite some time troubleshooting it -- to no avail. Then, I realized the example itself it may be broken. And sure 'nuff, it is!

Does anyone know what the actual bug is, so I can work around it on my test app? It must have worked at some time; but I can't figure out why it's broken now.

Thanks!

Answer 1

This is intentional - the sidebar only becomes collapsable on smaller screens and is open on larger screens. Shrinking your browser window will show the collapse button.

That being said, the Getting Started page is definitely in need of an update. It is a good guide for a basic page structure, but the individual demo pages will be a lot better if you're looking to try out some of the components. (Every demo has a CodePen link to open an editable version.)

Answer 2

That particular pen is working fine for me but I have noticed a few are not working, and it's due to the angular-material.js link being incorrect in the dependencies (under the pen's settings) the link provided redirects to the CSS.