Material Starter Components, the hidden gem of Angular 6

Angular 6 was released just a few days ago and with it came a whole set of features, including Angular Elements, being able to update your app to use all the latest packages using the new ng update feature. There is also ng add which allows you to add new packages to your app using your chosen package manager, either npm or yarn (or whatever new one comes out in the next 6 months).

After reading through the new release blog post, one set of features that haven’t been getting as much exposure as say Angular Elements, was the new Material Starter Components, which are part of this release.

I like Angular Material, I think it gives a great polish to the UI. When I’m creating Angular apps having the UI handled by a library like Material or ng-bootstrap, really helped to get the development of the app moving quickly. So I was happy to see that in Angular 6 there are these Starter Components.

But what are these components, well they are just standard Material components that generate layouts for your app. If you’re building an app that requires a collapsible side nav, there is a new component that will generate that for you. Not just the Nav but the main container and the side navigation with a couple of demo links so you can quickly get started building upon the basic structure the component generates for you.

There is also a dashboard component, which generates a layout of a dashboard application with a section for various panels that the dashboard would use to display information in.  Again this can be generated using the standard ng generate command of the Angular Cli.

What I find really exciting about these Starter Components is that they can be built by teams who want to have their own layouts and share them with the Angular community. If you’re building an HR app in Angular and you need a layout for showing staff details, check to see if one has been built by someone in the community. If it’s there then all you need is one simple command in the CLI and you have the basic layout of your app generated for you ready to go.

The more of these Starter Components there are, the easier it will be for teams to get started building responsive, attractive looking UIs with Angular Material.

For further information of Material Starter Components, there is the official docs on Schematics, the functionality in the CLI that allows you to add Starter Components. There is also a video by Tina Gao who works on the Angular Material team, where she discusses the Material Tree component